Flujo de servicio de pedido de suministros de consulta externa
Completa el flujo de reserva de servicio en el escenario de la lista de preparación de pedidos clínicos: incluye contenido real, controles interactivos, feedback claro de estado y un 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>Flujo de servicio de pedido de suministros de consulta externa</title>
<style>
:root { --ink:#102c44; --paper:#eef6f8; --accent:#e05263; --secondary:#79b7c7; --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:Avenir,"PingFang SC",sans-serif; background: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(1320px,calc(100% - 56px));margin:auto;padding:10vh 0}.mast{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:10vw;margin-block:6vh;align-items:start;margin-bottom:10vh}.mast h1{font-family:Avenir,"PingFang SC",sans-serif;font-weight:500;font-size:clamp(38px,8vw,88px);letter-spacing:-.055em;margin:0;line-height:.96}.eyebrow{display:block;margin-bottom:24px;font:600 10px/1 ui-monospace,monospace;letter-spacing:.22em}.intro{max-width:52ch;margin-top:28px;line-height:1.8}.scenario{font-size:13px;text-align:right}.demo{border-radius:1px;border-color:color-mix(in srgb,var(--ink) 35%,transparent);box-shadow:none;position:relative;min-height:420px;padding:clamp(28px,5vw,70px);background:transparent}@media(max-width:700px){.page{width:calc(100% - 24px);padding:36px 0}.mast{grid-template-columns:1fr;margin-bottom:30px}.scenario{text-align:left}.demo{padding:18px}}
.panel{padding:24px;border-block:1px solid var(--ink);background:transparent}.stack{display:grid;gap:22px}.row{display:flex;flex-wrap:wrap;gap:16px}.action{padding:8px 0;border:0;border-bottom:1px solid currentColor;background:transparent;letter-spacing:.08em}.action.primary,.action.is-active{color:var(--accent);border-bottom-width:4px}.status{min-height:28px;margin-top:20px;font-style:italic}.metric{font-family:Didot,serif;font-size:clamp(38px,8vw,76px)}.muted{max-width:54ch;line-height:1.8}.meter{position:relative;height:3px;background:var(--line)}.meter>i{position:absolute;inset:0 auto 0 0;background:var(--accent)}.chip{padding-bottom:3px;border-bottom:1px solid var(--ink);font-size:13px}
.composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
.reservation-demo{display:grid;grid-template-columns:1fr minmax(240px,.6fr);gap:16px}.reservation-demo section,.reservation-demo aside{display:grid;align-content:start;gap:16px;min-width:0}.reservation-demo h2{margin:.3em 0}.reservation-demo fieldset{min-width:0;border:0;padding:0}.reservation-dates,.reservation-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.reservation-slots{grid-template-columns:repeat(4,minmax(0,1fr))}.reservation-demo fieldset input{position:absolute;opacity:0}.reservation-demo fieldset span{display:block;padding:12px;border:1px solid var(--line);border-radius:10px;text-align:center}.reservation-demo fieldset input:checked+span{color:var(--paper);background:var(--accent)}.reservation-demo fieldset input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}.reservation-demo section>label{display:grid;gap:7px}.reservation-demo input[type="number"]{min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px}.reservation-demo dl div{display:flex;justify-content:space-between;gap:14px}.reservation-demo dd{margin:0;font-weight:900}@media(max-width:900px){.reservation-demo{grid-template-columns:1fr}.reservation-dates,.reservation-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}.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}}.evidence-shell{--evidence-zoom:100;display:grid;gap:18px;padding:clamp(16px,4vw,26px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 8%,transparent),color-mix(in srgb,var(--paper) 94%,transparent));box-shadow:var(--shadow)}.evidence-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.evidence-head h2{margin:.2em 0}.evidence-tools{display:grid;gap:10px;justify-items:end}.evidence-tools output{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:900}.evidence-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);gap:16px}.evidence-stage{display:grid;gap:12px;min-width:0}.evidence-ribbon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.evidence-ribbon button{display:grid;gap:6px;min-height:110px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-align:left}.evidence-ribbon button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.evidence-ribbon span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.14em}.evidence-ribbon small{opacity:.72;line-height:1.5}.evidence-core-shell{min-width:0;padding:clamp(12px,3vw,20px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.evidence-core-shell>*{display:block;width:calc(10000%/var(--evidence-zoom));max-width:none;transform:scale(calc(var(--evidence-zoom)/100));transform-origin:top left}.evidence-rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:22px;color:var(--paper);background:var(--ink)}.evidence-rail label{display:grid;gap:8px}.evidence-rail input,.evidence-rail select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.evidence-checklist,.evidence-log{display:grid;gap:8px;padding-left:18px;margin:0}.evidence-checklist li.is-active{color:var(--secondary);font-weight:900}.evidence-checklist li.is-done{color:var(--accent);font-weight:900}.evidence-log li{line-height:1.55}.evidence-shell[data-board-mode="proof"] .evidence-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:2px}.evidence-shell[data-board-mode="handoff"] .evidence-rail{background:color-mix(in srgb,var(--ink) 82%,#0a1512)}@media(max-width:920px){.evidence-body{grid-template-columns:1fr}.evidence-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.evidence-head{align-items:stretch;flex-direction:column}.evidence-tools{justify-items:start}.evidence-ribbon{grid-template-columns:1fr}.evidence-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="minimal" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">minimal / flujo de reservas de servicios / INTERMEDIATE</span><h1>Flujo de servicio de pedido de suministros de consulta externa</h1><p class="intro">Completa el flujo de reserva de servicio en el escenario de la lista de preparación de pedidos clínicos: incluye contenido real, controles interactivos, feedback claro de estado y un diseño adaptable a distintos tamaños.</p></div><span class="scenario">Lista de preparación de consulta</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Flujo de reserva de servicio</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Área interactiva del flujo de reservas del pedido de stock para clínica"><section id="evidenceShell" class="evidence-shell" data-board-mode="scan"><header class="evidence-head"><div><span class="eyebrow">Hoja de preparación para consulta externa / EVIDENCE BOARD</span><h2>Panel de observación del flujo de reservas de servicio</h2><p>Coloca el caso principal en un panel de evidencias, con una tarjeta de observación independiente, registros y cambios de modo para registrar el resultado actual.</p></div><div class="evidence-tools"><div class="row"><button class="action primary" type="button" data-board-mode="scan">Escanear</button><button class="action" type="button" data-board-mode="proof">Verificación</button><button class="action" type="button" data-board-mode="handoff">Entrega</button></div><output id="evidenceStatus">Esperando la muestra</output></div></header><div class="evidence-body"><section class="evidence-stage"><div class="evidence-ribbon"><button type="button" data-evidence-card="0" aria-pressed="true"><span>01</span><strong>Inspiración para la hoja de preparación de consultas externas</strong><small>Comprueba si los cambios de estado son visibles</small></button><button type="button" data-evidence-card="1" aria-pressed="false"><span>02</span><strong>Registro de la hoja de aprovisionamiento de la clínica</strong><small>Confirma que el teclado y el clic ofrecen la misma entrada</small></button><button type="button" data-evidence-card="2" aria-pressed="false"><span>03</span><strong>Colaboración de la hoja de preparación de la clínica ambulatoria</strong><small>Observa si el diseño retrocede en pantallas estrechas</small></button><button type="button" data-evidence-card="3" aria-pressed="false"><span>04</span><strong>Progreso de la lista de suministros de consultas externas</strong><small>Registrar la conclusión de la revisión actual</small></button></div><div id="evidenceCoreShell" class="evidence-core-shell"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Lista de preparación de la clínica DISPATCH</span><h2>Puesto de coordinación de suministros ambulatorios</h2><form id="workflowDispatchForm"><label>Tipo de tarea<select id="workflowDispatchKind"><option>Confirmación de requisitos de la hoja de preparación de consultas externas</option><option>Selección de plan para la hoja de suministros de la consulta externa</option><option>Envío final de la lista de preparación de la consulta externa</option></select></label><label>Cantidad estimada<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="27"><span>de</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">Confirmar proceso</button></form><label>Tarea actual<select id="workflowDispatchActive" aria-label="Cambiar tarea actual"><option value="1">Confirmación de requisitos de la hoja de preparación de consultas externas</option><option value="2">Selección de plan para la hoja de suministros de la consulta externa</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:commerce-service-flows-reservation-flow --><form id="reservationForm" class="reservation-demo"><section class="panel"><span class="eyebrow">RESERVATION</span><h2>Reserva de la lista de abastecimiento ambulatorio</h2><fieldset><legend>Seleccionar fecha</legend><div class="reservation-dates"><label><input type="radio" name="date" value="7 mes 16 día" checked data-core-bridge="commerce-service-flows-reservation-flow"><span>7 mes 16 día</span></label><label><input type="radio" name="date" value="7 mes 17 día"><span>7 mes 17 día</span></label><label><input type="radio" name="date" value="7 de 18"><span>7 de 18</span></label></div></fieldset><fieldset><legend>Seleccionar hora</legend><div class="reservation-slots"><label><input type="radio" name="slot" value="09:30"><span>09:30</span></label><label><input type="radio" name="slot" value="11:00" checked><span>11:00</span></label><label><input type="radio" name="slot" value="14:30"><span>14:30</span></label><label><input type="radio" name="slot" value="16:00"><span>16:00</span></label></div></fieldset><label>personas <input name="people" type="number" min="1" max="8" value="2"></label></section><aside class="panel"><h3>Resumen de la reserva</h3><dl><div><dt>Fecha</dt><dd id="reservationDate"></dd></div><div><dt>Hora</dt><dd id="reservationSlot"></dd></div><div><dt>personas</dt><dd id="reservationPeople"></dd></div></dl><button class="action primary" type="submit">Confirmar reserva</button><small>La demostración no enviará una reserva real.</small></aside></form><!-- 11DZ_CORE_END --></section></div></div></section><aside class="evidence-rail"><label>Escalado del lienzo<input id="evidenceZoom" type="range" min="88" max="128" value="100"><output id="evidenceZoomValue">100%</output></label><label>Muestra actual<select id="evidenceStep"><option value="0">Inspiración para la hoja de preparación de consultas externas</option><option value="1">Registro de la hoja de aprovisionamiento de la clínica</option><option value="2">Colaboración de la hoja de preparación de la clínica ambulatoria</option><option value="3">Progreso de la lista de suministros de consultas externas</option></select></label><ul id="evidenceChecklist" class="evidence-checklist"><li>Inspiración para la hoja de preparación de consultas externas</li><li>Registro de la hoja de aprovisionamiento de la clínica</li><li>Colaboración de la hoja de preparación de la clínica ambulatoria</li><li>Progreso de la lista de suministros de consultas externas</li></ul><button id="evidenceCapture" class="action primary" type="button">Escribir evidencia</button><ol id="evidenceLog" class="evidence-log"><li>Aún no se han registrado pruebas</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:commerce-service-flows-reservation-flow */
const reservationForm=document.querySelector('#reservationForm');function renderReservation(){const data=new FormData(reservationForm);document.querySelector('#reservationDate').textContent=data.get('date');document.querySelector('#reservationSlot').textContent=data.get('slot');document.querySelector('#reservationPeople').textContent=data.get('people')+' persona';announce('Resumen de la reserva actualizado');}reservationForm.querySelectorAll('input').forEach(input=>input.addEventListener('change',renderReservation));reservationForm.addEventListener('submit',event=>{event.preventDefault();renderReservation();announce('La reserva de la hoja de aprovisionamiento de la clínica se ha confirmado localmente');});renderReservation();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"commerce-service-flows-reservation-flow","selector":"[data-core-bridge=\"commerce-service-flows-reservation-flow\"]","mode":"radio","key":"ArrowRight"};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("keydown",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('input',workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',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();const radios=[...workflowBridgeCore.querySelectorAll('input[type="radio"]')].filter(input=>input.name===workflowBridgeControl.name&&!input.disabled);const current=Math.max(0,radios.findIndex(input=>input.checked));radios[(current+1)%radios.length].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":"Confirmación de requisitos de la hoja de preparación de consultas externas","amount":12,"priority":"normal","touches":0}],["2",{"label":"Selección de plan para la hoja de suministros de la consulta externa","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+' vols. · '+bridge.summary;announce('Tareas actuales de la lista de preparación de consulta:'+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+' vols. · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
const evidenceShell=document.querySelector('#evidenceShell');const evidenceStatus=document.querySelector('#evidenceStatus');const evidenceZoom=document.querySelector('#evidenceZoom');const evidenceZoomValue=document.querySelector('#evidenceZoomValue');const evidenceStep=document.querySelector('#evidenceStep');const evidenceChecklistItems=[...document.querySelectorAll('#evidenceChecklist li')];const evidenceCards=[...document.querySelectorAll('[data-evidence-card]')];const evidenceLog=document.querySelector('#evidenceLog');const evidenceModeButtons=[...evidenceShell.querySelectorAll('button[data-board-mode]')];const evidenceNotes=["Inspiración para la hoja de preparación de consultas externas","Registro de la hoja de aprovisionamiento de la clínica","Colaboración de la hoja de preparación de la clínica ambulatoria","Progreso de la lista de suministros de consultas externas"];const evidenceCore=document.querySelector('#workflowCore');let evidenceCaptures=0;function evidenceSetCard(index){evidenceCards.forEach((card,cardIndex)=>{const active=cardIndex===index;card.setAttribute('aria-pressed',String(active));});evidenceChecklistItems.forEach((item,itemIndex)=>{item.classList.toggle('is-active',itemIndex===index);item.classList.toggle('is-done',itemIndex<evidenceCaptures);});}function evidenceRender(reason){const version=evidenceCore?.dataset.workflowVersion||'0';const zoom=Number(evidenceZoom.value);const active=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);evidenceShell.style.setProperty('--evidence-zoom',String(zoom));evidenceZoomValue.textContent=zoom+'%';evidenceSetCard(active);evidenceStatus.textContent=reason+' · versión principal '+version;}evidenceModeButtons.forEach(button=>button.addEventListener('click',()=>{evidenceModeButtons.forEach(item=>item.classList.toggle('primary',item===button));evidenceShell.dataset.boardMode=button.dataset.boardMode;evidenceRender('Se ha cambiado a'+button.textContent);announce('Modo evidencia:'+button.textContent);}));evidenceCards.forEach((card,index)=>card.addEventListener('click',()=>{evidenceStep.value=String(index);evidenceRender('Tarjeta de observación cambiada');announce('Tarjeta de observación:'+evidenceNotes[index]);}));evidenceZoom.addEventListener('input',()=>{evidenceRender('El zoom del lienzo se ha actualizado');announce('Observación de escala '+evidenceZoom.value+'%');});evidenceStep.addEventListener('change',()=>{const index=Number(evidenceStep.value)||0;evidenceRender('Cambio a la vista de muestra');announce('Muestra actual:'+evidenceNotes[index]);});document.querySelector('#evidenceCapture').addEventListener('click',()=>{const index=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);const note=evidenceNotes[index];const version=evidenceCore?.dataset.workflowVersion||'0';evidenceCaptures+=1;const item=document.createElement('li');item.textContent='evidencia '+evidenceCaptures+' · '+note+' · versión principal '+version;const empty=evidenceLog.querySelector('li')?.textContent==='Aún no se han registrado pruebas';if(empty)evidenceLog.replaceChildren(item);else evidenceLog.prepend(item);while(evidenceLog.children.length>6)evidenceLog.lastElementChild.remove();evidenceRender('Se ha registrado la evidencia '+evidenceCaptures);announce('Se ha registrado la evidencia '+evidenceCaptures+' · '+note);});evidenceCore?.addEventListener('focusin',()=>evidenceRender('Caso principal tiene el foco'));evidenceCore?.addEventListener('click',()=>evidenceRender('Se produce una interacción en el caso principal'));evidenceRender('Esperando la muestra');
</script>
</body>
</html>