Panel de canalización del despacho de vivienda
Completa un panel de proceso en un escenario de despacho residencial: incluye contenido real, controles interactivos, comentarios claros de estado y diseño adaptable a distintos tamaños.
Tras activar JavaScript, puedes editar, ejecutar y guardar este ejemplo. El código fuente fijado es el siguiente:
<!doctype html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Panel de canalización del despacho de vivienda</title>
<style>
:root { --ink:#111111; --paper:#f8f8f4; --accent:#111111; --secondary:#8d8d88; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Helvetica,"PingFang SC",sans-serif; background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--ink) 7%,transparent) 32px),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1120px,calc(100% - 30px));margin:auto;padding:48px 0 80px}.mast{display:grid;grid-template-columns:1fr auto;border-top:10px solid var(--ink);padding-top:20px;gap:20px;align-items:end;margin-bottom:26px}.mast h1{font-family:Helvetica,"PingFang SC",sans-serif;font-weight:900;font-size:clamp(44px,10vw,106px);letter-spacing:-.075em;margin:0;line-height:.82}.eyebrow{display:inline-block;margin-bottom:12px;padding:5px 8px;color:var(--paper);background:var(--ink);font:900 10px/1 ui-monospace,monospace;letter-spacing:.14em}.intro{max-width:700px;line-height:1.55}.scenario{padding:9px 12px;border:3px solid var(--ink);font-weight:900}.demo{border:3px solid var(--ink);border-radius:0;box-shadow:12px 12px 0 var(--ink);position:relative;min-height:410px;overflow:hidden;padding:clamp(22px,4vw,46px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:15px}}
.panel{padding:18px;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px}.action{min-height:42px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.status{min-height:24px;padding:8px;color:var(--paper);background:var(--ink);font-weight:900}.metric{font-size:clamp(34px,8vw,76px);font-weight:900;letter-spacing:-.08em}.muted{font-weight:600}.chip{padding:5px 8px;border:2px solid var(--ink);font-weight:900}.meter{height:14px;border:3px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
.composition-gallery{margin:0;padding:clamp(8px,2vw,18px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 78%,transparent)}.gallery-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 4px 2px;font-size:12px}.gallery-caption::before,.gallery-caption::after{content:"";height:1px;background:var(--line)}.gallery-caption strong{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.composition-gallery .demo{box-shadow:none}.composition-gallery .demo::before{content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--accent) 36%,transparent);pointer-events:none}
.pipeline-console{display:grid;gap:16px}.pipeline-console>header,.pipeline-console>footer{display:flex;justify-content:space-between;gap:16px;align-items:end}.pipeline-console h2{margin:.25em 0}.pipeline-console>header>output{font:800 13px/1.4 ui-monospace,monospace}.pipeline-stages{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:8px;overflow:auto}.pipeline-stages>section{min-height:310px;border-top:7px solid var(--stage-color,var(--accent));background:color-mix(in srgb,var(--secondary) 10%,var(--paper))}.pipeline-stages>section:nth-child(2){--stage-color:#4c72b0}.pipeline-stages>section:nth-child(3){--stage-color:#b8792f}.pipeline-stages>section:nth-child(4){--stage-color:#3e8c63}.pipeline-stages section>header{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:13px}.pipeline-stages h3{margin:0;font-size:14px}.pipeline-stages section>div{display:grid;gap:8px;padding:0 9px 12px}.pipeline-stages [data-pipeline-card]{display:grid;grid-template-columns:1fr auto;gap:6px;width:100%;padding:13px;border:1px solid var(--line);border-radius:4px;background:var(--paper);text-align:left}.pipeline-stages [data-pipeline-card][aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:1px}.pipeline-stages [data-pipeline-card] small{grid-column:1}.pipeline-stages [data-pipeline-card] i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal}.pipeline-console>footer{padding:15px;border-left:6px solid var(--accent);background:var(--paper)}.pipeline-console>footer div{display:grid;gap:4px}.pipeline-console>footer .action{flex:none}@media(max-width:720px){.pipeline-console>header,.pipeline-console>footer{align-items:stretch;flex-direction:column}.pipeline-stages{grid-template-columns:repeat(4,230px)}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}.pipeline-ledger{--casework-scale:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(160deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 95%,transparent));box-shadow:var(--shadow)}.pipeline-ledger__head{display:flex;justify-content:space-between;gap:18px;align-items:end}.pipeline-ledger__head h2{margin:.18em 0}.pipeline-ledger__modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.pipeline-ledger__grid{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(230px,.54fr);gap:16px}.pipeline-ledger__viewport{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.pipeline-ledger__viewport>*{display:block;width:calc(10000%/var(--casework-scale));max-width:none;transform:scale(calc(var(--casework-scale)/100));transform-origin:top left}.pipeline-ledger__rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:24px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 90%,#08120f),color-mix(in srgb,var(--ink) 72%,#1b120e))}.pipeline-ledger__rail label{display:grid;gap:8px}.pipeline-ledger__rail input{width:100%}.pipeline-ledger__notes{display:grid;gap:10px}.pipeline-ledger__notes button{display:grid;gap:6px;padding:14px;border:1px solid #ffffff24;border-radius:16px;color:inherit;background:#ffffff10;text-align:left}.pipeline-ledger__notes button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff1a;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.pipeline-ledger__notes small{line-height:1.45;opacity:.78}.pipeline-ledger__log{display:grid;gap:8px;margin:0;padding-left:18px}.pipeline-ledger[data-casework-mode="inspect"] .pipeline-ledger__viewport{outline:4px solid color-mix(in srgb,var(--accent) 26%,transparent);outline-offset:2px}.pipeline-ledger[data-casework-mode="handoff"] .pipeline-ledger__rail{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 84%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:920px){.pipeline-ledger__grid{grid-template-columns:1fr}}@media(max-width:560px){.pipeline-ledger__head{align-items:stretch;flex-direction:column}.pipeline-ledger__modes{justify-content:start}.pipeline-ledger__viewport>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="monochrome" data-composition="gallery-frame">
<main class="page">
<header class="mast"><div><span class="eyebrow">monocromo / panel de canalización de procesos / INTERMEDIATE</span><h1>Panel de canalización del despacho de vivienda</h1><p class="intro">Completa un panel de proceso en un escenario de despacho residencial: incluye contenido real, controles interactivos, comentarios claros de estado y diseño adaptable a distintos tamaños.</p></div><span class="scenario">Sala de coordinación de asuntos de vivienda</span></header>
<figure class="composition-gallery"><section class="demo" aria-label="Área interactiva del panel de la línea de proceso de la sala de despacho"><section id="pipelineLedger" class="pipeline-ledger" data-casework-mode="queue"><header class="pipeline-ledger__head"><div><span class="eyebrow">Despacho de vivienda / PIPELINE LEDGER</span><h2>Libro de registro de disposición del panel de canalización de procesos</h2><p>Pon la tubería del proceso en el libro de gestión y sepárala de los tableros de revisión existentes con modo de inspección independiente, escalado y entradas de registro.</p></div><div class="pipeline-ledger__modes"><button class="action primary" type="button" data-casework-mode="queue">Cola</button><button class="action" type="button" data-casework-mode="inspect">Revisar</button><button class="action" type="button" data-casework-mode="handoff">Entrega</button></div></header><div class="pipeline-ledger__grid"><div class="pipeline-ledger__viewport"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">sala de despacho de servicios de vivienda DISPATCH</span><h2>Puesto de despacho de asuntos de vivienda</h2><form id="workflowDispatchForm"><label>Tipo de tarea<select id="workflowDispatchKind"><option>Vista de supervisión de la sala de despacho de vivienda</option><option>Vista de gestión del centro de despacho de asuntos residenciales</option><option>Vista de revisión del centro de despacho de vivienda</option></select></label><label>Umbral de alerta<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="45"><span>punto</span></label><fieldset><legend>Prioridad de procesamiento</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Normal</label><label><input type="radio" name="workflowPriority" value="urgent">Urgente</label></fieldset><button class="action primary" type="submit">Panel de aplicaciones</button></form><label>Tarea actual<select id="workflowDispatchActive" aria-label="Cambiar tarea actual"><option value="1">Vista de supervisión de la sala de despacho de vivienda</option><option value="2">Vista de gestión del centro de despacho de asuntos residenciales</option></select></label><output id="workflowDispatchSummary">A la espera de la programación</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:dashboards-admin-pipeline-board --><section class="pipeline-console"><header><div><span class="eyebrow">STAGE PIPELINE</span><h2>Flujo de la sala de despacho de vivienda</h2></div><output id="pipelineSummary">Total 0 · 4 procesos</output></header><div id="pipelineStages" class="pipeline-stages"><section data-pipeline-stage="0"><header><span>01</span><h3>Pista</h3><output>0</output></header><div><button type="button" data-pipeline-card="1" aria-pressed="true"><b>Recordatorio de la sala de despacho de tareas residenciales</b><small>Peso 31</small><i aria-hidden="true">→</i></button><button type="button" data-pipeline-card="2" aria-pressed="false"><b>Colección de la sala de despacho de vivienda</b><small>Peso 44</small><i aria-hidden="true">→</i></button><button type="button" data-pipeline-card="3" aria-pressed="false"><b>Resumen de la sala de despacho de tareas del hogar</b><small>Peso 57</small><i aria-hidden="true">→</i></button></div></section><section data-pipeline-stage="1"><header><span>02</span><h3>Revisión</h3><output>0</output></header><div><button type="button" data-pipeline-card="0" aria-pressed="false"><b>progreso de la sala de despacho de vivienda</b><small>Peso 18</small><i aria-hidden="true">→</i></button></div></section><section data-pipeline-stage="2"><header><span>03</span><h3>Plan</h3><output>0</output></header><div></div></section><section data-pipeline-stage="3"><header><span>04</span><h3>completado</h3><output>0</output></header><div></div></section></div><footer><div><span>Flujo actual</span><strong id="pipelineActive">progreso de la sala de despacho de vivienda</strong></div><button id="pipelineAdvance" class="action primary" type="button" data-core-bridge="dashboards-admin-pipeline-board">Avanzar a la siguiente fase</button><button id="pipelineRestart" class="action" type="button">Restablecer la canalización</button></footer></section><!-- 11DZ_CORE_END --></section></div></div><aside class="pipeline-ledger__rail"><label>observación de ampliación<input id="pipelineLedgerScale" type="range" min="84" max="132" value="100"><output id="pipelineLedgerScaleValue">100%</output></label><div class="pipeline-ledger__notes"><button type="button" data-casework-note="0" aria-pressed="true"><strong>progreso de la sala de despacho de vivienda</strong><small>Comprobar cambios de estado</small></button><button type="button" data-casework-note="1" aria-pressed="false"><strong>Recordatorio de la sala de despacho de tareas residenciales</strong><small>Confirmar acceso por teclado</small></button><button type="button" data-casework-note="2" aria-pressed="false"><strong>Colección de la sala de despacho de vivienda</strong><small>fallback para pantallas estrechas</small></button><button type="button" data-casework-note="3" aria-pressed="false"><strong>Resumen de la sala de despacho de tareas del hogar</strong><small>Escribir conclusión actual</small></button></div><button id="pipelineLedgerCapture" class="action primary" type="button">Incluir elementos de resolución</button><ol id="pipelineLedgerLog" class="pipeline-ledger__log"><li>Esperando el primer registro</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Sala de despacho de vivienda / GALLERY 03</strong></figcaption></figure>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:dashboards-admin-pipeline-board */
const pipelineCards=[{"label":"progreso de la sala de despacho de vivienda","value":18,"stage":1},{"label":"Recordatorio de la sala de despacho de tareas residenciales","value":31,"stage":0},{"label":"Colección de la sala de despacho de vivienda","value":44,"stage":0},{"label":"Resumen de la sala de despacho de tareas del hogar","value":57,"stage":0}];const pipelineStageLabels=["Pista","Revisión","Plan","completado"];let pipelineActive=0;const pipelineStages=[...document.querySelectorAll('[data-pipeline-stage]')];function renderPipeline(){pipelineStages.forEach(stage=>stage.querySelector(':scope>div').replaceChildren());pipelineCards.forEach((card,index)=>{const button=document.createElement('button');button.type='button';button.dataset.pipelineCard=String(index);button.setAttribute('aria-pressed',String(index===pipelineActive));button.innerHTML='<b>'+card.label+'</b><small>Peso '+card.value+'</small><i aria-hidden="true">→</i>';button.addEventListener('click',()=>{pipelineActive=index;renderPipeline();});pipelineStages[card.stage].querySelector(':scope>div').append(button);});pipelineStages.forEach((stage,index)=>{stage.querySelector('output').textContent=pipelineCards.filter(card=>card.stage===index).length;});const active=pipelineCards[pipelineActive];document.querySelector('#pipelineActive').textContent=active.label+' · '+pipelineStageLabels[active.stage];document.querySelector('#pipelineSummary').textContent='Valor total '+pipelineCards.reduce((sum,card)=>sum+card.value,0)+' · '+pipelineCards.length+' procesos';document.querySelector('#pipelineAdvance').disabled=active.stage===pipelineStages.length-1;announce(active.label+' Actualmente en '+pipelineStageLabels[active.stage]);}document.querySelector('#pipelineAdvance').addEventListener('click',()=>{const active=pipelineCards[pipelineActive];active.stage=Math.min(pipelineStages.length-1,active.stage+1);renderPipeline();});document.querySelector('#pipelineRestart').addEventListener('click',()=>{pipelineCards.forEach((card,index)=>{card.stage=index===0?1:0;});pipelineActive=0;renderPipeline();});renderPipeline();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"dashboards-admin-pipeline-board","selector":"[data-core-bridge=\"dashboards-admin-pipeline-board\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · versión principal '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Vista de supervisión de la sala de despacho de vivienda","amount":12,"priority":"normal","touches":0}],["2",{"label":"Vista de gestión del centro de despacho de asuntos residenciales","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' punto · '+bridge.summary;announce('Tareas actuales del centro de despacho de vivienda: '+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgente':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' punto · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
const caseworkShell=document.querySelector('#pipelineLedger');const caseworkScale=document.querySelector('#pipelineLedgerScale');const caseworkScaleValue=document.querySelector('#pipelineLedgerScaleValue');const caseworkLog=document.querySelector('#pipelineLedgerLog');const caseworkModeButtons=[...caseworkShell.querySelectorAll('[data-casework-mode]')];const caseworkNotes=[...caseworkShell.querySelectorAll('[data-casework-note]')];const caseworkLabels=["progreso de la sala de despacho de vivienda","Recordatorio de la sala de despacho de tareas residenciales","Colección de la sala de despacho de vivienda","Resumen de la sala de despacho de tareas del hogar"];const caseworkCore=document.querySelector('#workflowCore');let caseworkCount=0;function caseworkActiveIndex(){return Math.max(0,caseworkNotes.findIndex(button=>button.getAttribute('aria-pressed')==='true'));}function caseworkRender(reason){const version=caseworkCore?.dataset.workflowVersion||'0';const scale=Number(caseworkScale.value);caseworkShell.style.setProperty('--casework-scale',String(scale));caseworkScaleValue.textContent=scale+'%';caseworkNotes.forEach((button,index)=>button.setAttribute('aria-pressed',String(index===caseworkActiveIndex())));announce(reason+' · versión principal '+version);}caseworkModeButtons.forEach(button=>button.addEventListener('click',()=>{caseworkModeButtons.forEach(item=>item.classList.toggle('primary',item===button));caseworkShell.dataset.caseworkMode=button.dataset.caseworkMode;caseworkRender('Se ha cambiado a'+button.textContent);}));caseworkNotes.forEach((button,index)=>button.addEventListener('click',()=>{caseworkNotes.forEach(item=>item.setAttribute('aria-pressed','false'));button.setAttribute('aria-pressed','true');caseworkRender('Tarjeta de registro cambiada');announce('Ficha de registro:'+caseworkLabels[index]);}));caseworkScale.addEventListener('input',()=>caseworkRender('La escala de observación se ha actualizado'));document.querySelector('#pipelineLedgerCapture').addEventListener('click',()=>{const index=caseworkActiveIndex();const version=caseworkCore?.dataset.workflowVersion||'0';caseworkCount+=1;const item=document.createElement('li');item.textContent='registro '+caseworkCount+' · '+(caseworkLabels[index]||caseworkLabels[0]||'Muestra sin nombre')+' · versión principal '+version;const empty=caseworkLog.querySelector('li')?.textContent==='Esperando el primer registro';if(empty)caseworkLog.replaceChildren(item);else caseworkLog.prepend(item);while(caseworkLog.children.length>6)caseworkLog.lastElementChild.remove();caseworkRender('Registro escrito '+caseworkCount);});caseworkCore?.addEventListener('focusin',()=>caseworkRender('Caso principal tiene el foco'));caseworkCore?.addEventListener('click',()=>caseworkRender('Se produce una interacción en el caso principal'));caseworkRender('Preparado para crear el registro');
</script>
</body>
</html>