Notas en cascada del estante de historias ambulatorias
En un contexto de estantería de historias de la clínica, crea notas en cascada: incluye contenido real, controles interactivos, una retroalimentación de estado clara 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>Notas en cascada del estante de historias ambulatorias</title>
<style>
:root { --ink:#18332f; --paper:#f4efe4; --accent:#d45f3e; --secondary:#8fc4ad; --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:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),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(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
.panel{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent)}.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:9px}.action{padding:11px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);background:transparent;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:24px;color:var(--secondary);text-shadow:0 0 10px currentColor}.metric{font-size:clamp(30px,7vw,64px);font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.muted{opacity:.7}.chip{padding:6px 9px;border:1px solid var(--secondary);border-radius:4px}.meter{height:7px;background:color-mix(in srgb,var(--accent) 15%,transparent)}.meter>i{display:block;height:100%;box-shadow:0 0 12px var(--accent);background:var(--accent)}
.composition-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.notes-demo{display:grid;gap:16px}.notes-demo header{display:flex;justify-content:space-between;gap:18px;align-items:end}.notes-demo h2{margin:.3em 0}.masonry-notes{columns:3 210px;column-gap:12px}.masonry-notes article{break-inside:avoid;margin:0 0 12px;padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}.masonry-notes span{color:var(--accent);font:800 11px/1 ui-monospace,monospace}@media(max-width:560px){.notes-demo header{align-items:stretch;flex-direction:column}.masonry-notes{columns:1}}.workflow-guide{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-areas:"rail core" "rail evidence";gap:14px 18px}.guide-rail{grid-area:rail;display:grid;align-content:start;gap:15px;padding:18px;border-right:1px solid var(--line)}.guide-rail ol{display:grid;gap:8px;padding:0;margin:0;list-style:none}.guide-rail li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px;opacity:.5}.guide-rail li[aria-current="step"]{opacity:1;color:var(--paper);background:var(--ink)}.guide-rail li.is-complete{opacity:1;color:var(--accent)}.guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guide-actions .action{padding-inline:8px}#workflowGuideProgress{height:6px;background:var(--line)}#workflowGuideProgress i{display:block;width:0;height:100%;background:var(--accent)}.guide-core{grid-area:core;min-width:0;padding:16px;border:1px solid var(--line)}.guide-core>p{margin:0 0 14px;padding:10px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.guide-core[data-guide-step="1"]{border-radius:28px}.guide-core[data-guide-step="2"]{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}.guide-evidence{grid-area:evidence;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}.guide-evidence details,.guide-evidence form{padding:12px;border:1px solid var(--line)}.guide-evidence label{display:grid;gap:7px}.guide-evidence textarea{width:100%;padding:9px;border:1px solid var(--line);background:var(--paper)}@media(max-width:900px){.workflow-guide{grid-template-columns:1fr;grid-template-areas:"core" "rail" "evidence"}.guide-rail{border-right:0;border-bottom:1px solid var(--line)}.guide-rail ol{grid-template-columns:repeat(3,1fr)}.guide-evidence{grid-template-columns:1fr}}.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="editorial" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">editorial / notas en cascada / BEGINNER</span><h1>Notas en cascada del estante de historias ambulatorias</h1><p class="intro">En un contexto de estantería de historias de la clínica, crea notas en cascada: incluye contenido real, controles interactivos, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.</p></div><span class="scenario">Estantería de historias de la clínica</span></header>
<div class="composition-index"><section class="demo" aria-label="Zona interactiva de notas en cascada para el archivo de historias de consultas externas"><section id="evidenceShell" class="evidence-shell" data-board-mode="scan"><header class="evidence-head"><div><span class="eyebrow">Estante de historias ambulatorias / EVIDENCE BOARD</span><h2>Panel de observación de notas en cascada</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>Vista general de la estantería de historias de la clínica</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>Plan de estantería de historias clínicas</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>Inspiración de estantería de historias de consulta</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>Registro de estantería de historias de la clínica</strong><small>Registrar la conclusión de la revisión actual</small></button></div><div id="evidenceCoreShell" class="evidence-core-shell"><div class="workflow-guide"><nav class="guide-rail" aria-label="Guía de la estantería de historias de la clínica"><span class="eyebrow">Estante de historias de clínica externa GUIDE</span><ol><li data-workflow-guide-step="0" aria-current="step"><b>1</b><span>Lista de recopilación del estante de historias de consultas externas</span></li><li data-workflow-guide-step="1"><b>2</b><span>Clasificación y agrupación de historias de consulta externa</span></li><li data-workflow-guide-step="2"><b>3</b><span>La estantería de historias de consulta externa ya está publicada</span></li></ol><div class="guide-actions"><button id="workflowGuideBack" class="action" type="button" disabled>Paso anterior</button><button id="workflowGuideNext" class="action primary" type="button">Completar este paso</button></div><div id="workflowGuideProgress" role="progressbar" aria-label="completado de la estantería de historias de la clínica" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div></nav><section id="workflowCore" class="workflow-core guide-core" data-guide-step="0" aria-describedby="workflowGuideInstruction"><p id="workflowGuideInstruction">Realiza las operaciones relacionadas con «lista de recogida de historias de la estantería de clínicas» en el ejemplo principal.</p><!-- 11DZ_CORE_START:cards-lists-content-masonry-notes --><div class="notes-demo"><header><span class="eyebrow">MASONRY NOTES</span><h2>Notas del expositor de historias de consultas</h2><button id="addMasonryNote" class="action" type="button" data-core-bridge="cards-lists-content-masonry-notes">Añadir nota adhesiva</button></header><div id="masonryNotes" class="masonry-notes"><article><span>01</span><h3>Vista general de la estantería de historias de la clínica</h3><p>Registra un fragmento breve de contenido que se pueda leer de forma independiente.</p></article><article><span>02</span><h3>Plan de estantería de historias clínicas</h3><p>Registra un breve contenido que pueda leerse de forma independiente. Registra un breve contenido que pueda leerse de forma independiente.</p></article><article><span>03</span><h3>Inspiración de estantería de historias de consulta</h3><p>Registra un fragmento de contenido breve que pueda leerse de forma independiente. Registra un fragmento de contenido breve que pueda leerse de forma independiente. Registra un fragmento de contenido breve que pueda leerse de forma independiente.</p></article><article><span>04</span><h3>Registro de estantería de historias de la clínica</h3><p>Registra un fragmento breve de contenido que se pueda leer de forma independiente.</p></article><article><span>05</span><h3>Colaboración en estantería de historias de consulta</h3><p>Registra un breve contenido que pueda leerse de forma independiente. Registra un breve contenido que pueda leerse de forma independiente.</p></article><article><span>06</span><h3>Progreso de la estantería de historias clínicas</h3><p>Registra un fragmento de contenido breve que pueda leerse de forma independiente. Registra un fragmento de contenido breve que pueda leerse de forma independiente. Registra un fragmento de contenido breve que pueda leerse de forma independiente.</p></article><article><span>07</span><h3>Recordatorio del estante de historias de la clínica</h3><p>Registra un fragmento breve de contenido que se pueda leer de forma independiente.</p></article></div></div><!-- 11DZ_CORE_END --></section><aside class="guide-evidence"><details id="workflowGuideDetails"><summary>Ver los requisitos de aceptación</summary><ul><li>La colección del archivador de historias de la consulta necesita un cambio de estado visible de un solo vistazo</li><li>La clasificación y agrupación de la estantería de historias de la consulta requiere un cambio de estado visible de una sola vez</li><li>La estantería de historias de la clínica requiere un cambio visible de estado para publicar</li></ul></details><form id="workflowGuideEvidenceForm"><label>Evidencia de esta etapa<textarea id="workflowGuideEvidence" rows="3" placeholder="Registrar el estado observado"></textarea></label><input class="action" type="submit" value="Guardar evidencia"></form><output id="workflowGuideSummary">0 / 3 pasos completados</output></aside></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">Vista general de la estantería de historias de la clínica</option><option value="1">Plan de estantería de historias clínicas</option><option value="2">Inspiración de estantería de historias de consulta</option><option value="3">Registro de estantería de historias de la clínica</option></select></label><ul id="evidenceChecklist" class="evidence-checklist"><li>Vista general de la estantería de historias de la clínica</li><li>Plan de estantería de historias clínicas</li><li>Inspiración de estantería de historias de consulta</li><li>Registro de estantería de historias de la clínica</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><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Estantería de historias de consulta FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:cards-lists-content-masonry-notes */
let masonryNoteCount=document.querySelectorAll('#masonryNotes article').length;document.querySelector('#addMasonryNote').addEventListener('click',()=>{masonryNoteCount+=1;const note=document.createElement('article');note.innerHTML='<span>'+String(masonryNoteCount).padStart(2,'0')+'</span><h3>Nueva nota para el estante de historias de la clínica</h3><p>Contenido de nota local recién añadido.</p>';document.querySelector('#masonryNotes').prepend(note);announce('Añadido el '+masonryNoteCount+' Tarjeta de nota');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"cards-lists-content-masonry-notes","selector":"[data-core-bridge=\"cards-lists-content-masonry-notes\"]","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 workflowGuideCore=document.querySelector('#workflowCore');const workflowGuideStages=["Lista de recopilación del estante de historias de consultas externas","Clasificación y agrupación de historias de consulta externa","La estantería de historias de consulta externa ya está publicada"];const workflowGuideState={step:0,completed:new Set(),evidence:new Map(),consumedVersion:0};function workflowGuideDrive(){const step=workflowGuideState.step;workflowGuideCore.dataset.guideStep=String(step);document.querySelector('#workflowGuideInstruction').textContent='Por favor, completa “'+workflowGuideStages[step]+'acciones relacionadas con «».';document.querySelectorAll('[data-workflow-guide-step]').forEach((item,index)=>{item.classList.toggle('is-complete',workflowGuideState.completed.has(index));if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');});document.querySelector('#workflowGuideBack').disabled=step===0;document.querySelector('#workflowGuideNext').textContent=step===workflowGuideStages.length-1?'Guardar organización':'Completar este paso';const percent=Math.round(workflowGuideState.completed.size/workflowGuideStages.length*100);const progress=document.querySelector('#workflowGuideProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';document.querySelector('#workflowGuideSummary').textContent=workflowGuideState.completed.size+' / '+workflowGuideStages.length+' Paso completado · '+workflowBridgeSummary();announce('Paso actual del estante de historias de consulta:'+workflowGuideStages[step]);}function workflowGuideAdvance(direction){if(direction>0){const bridge=workflowBridgeActivate();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Primero completa el cambio visible de estado del caso principal');return;}workflowGuideState.consumedVersion=version;workflowGuideState.completed.add(workflowGuideState.step);announce('Caso principal actualizado · '+bridge.summary);}workflowGuideState.step=Math.max(0,Math.min(workflowGuideStages.length-1,workflowGuideState.step+direction));workflowGuideDrive();}document.querySelector('#workflowGuideBack').addEventListener('click',()=>workflowGuideAdvance(-1));document.querySelector('#workflowGuideNext').addEventListener('click',()=>workflowGuideAdvance(1));document.querySelector('#workflowGuideEvidenceForm').addEventListener('submit',event=>{event.preventDefault();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('La prueba no se ha guardado: el caso principal aún no tiene nuevos cambios');return;}const text=document.querySelector('#workflowGuideEvidence').value.trim();workflowGuideState.evidence.set(workflowGuideState.step,text||'Comprobación de estado visible completada');workflowGuideState.completed.add(workflowGuideState.step);workflowGuideState.consumedVersion=version;workflowGuideDrive();announce('La evidencia de este paso se ha guardado · '+workflowBridgeSummary());});document.querySelector('#workflowGuideDetails').addEventListener('toggle',event=>announce(event.currentTarget.open?'Requisitos de aceptación desplegados':'Requisitos de aceptación contraídos'));workflowGuideDrive();
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=["Vista general de la estantería de historias de la clínica","Plan de estantería de historias clínicas","Inspiración de estantería de historias de consulta","Registro de estantería de historias de la clínica"];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>