Navegación por secciones del tablón de anuncios de la clínica
En el escenario del tablón de anuncios de consultas externas, completa una navegación por secciones: incluye contenido real, controles operables, 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>Navegación por secciones del tablón de anuncios de la clínica</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#af4f45; --secondary:#9eb49f; --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:"Trebuchet MS","PingFang SC",sans-serif; background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 35%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 38%),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(1160px,calc(100% - 30px));margin:auto;padding:60px 0}.mast{display:flex;justify-content:space-between;border-left:4px solid var(--accent);padding-left:22px;gap:28px;align-items:center;margin-bottom:34px}.mast h1{font-family:"Trebuchet MS","PingFang SC",sans-serif;font-weight:900;font-size:clamp(42px,9vw,94px);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);margin:0;line-height:.92}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:900 11px/1 ui-monospace,monospace;letter-spacing:.2em}.intro{max-width:680px;color:color-mix(in srgb,var(--ink) 68%,transparent);line-height:1.7}.scenario{padding:10px 16px;border:1px solid var(--secondary);border-radius:4px;box-shadow:0 0 20px color-mix(in srgb,var(--secondary) 30%,transparent)}.demo{border-color:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:24px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 60px color-mix(in srgb,var(--secondary) 12%,transparent);position:relative;min-height:410px;overflow:hidden;padding:clamp(24px,4vw,50px);background:color-mix(in srgb,var(--paper) 86%,transparent)}@media(max-width:700px){.mast{display:grid}.page{padding:22px 0}.demo{padding:16px}}
.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-split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}.split-note{position:sticky;top:20px;display:grid;gap:14px;padding:18px 12px;border-block:3px double var(--accent);font-size:13px;line-height:1.65}.split-note b{font:900 12px/1 ui-monospace,monospace;letter-spacing:.12em}.split-note span{writing-mode:vertical-rl;min-height:120px;color:color-mix(in srgb,var(--ink) 60%,transparent)}.composition-split .demo{min-width:0}@media(max-width:900px){.composition-split{grid-template-columns:1fr}.split-note{position:static;grid-template-columns:auto 1fr}.split-note span{writing-mode:horizontal-tb;min-height:0}}
.section-spy{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px}.section-spy nav{display:grid;align-content:start;gap:6px;padding:14px;border-left:3px solid var(--line)}.section-spy nav a{padding:11px;color:inherit;text-decoration:none}.section-spy nav a[aria-current="location"]{border-radius:9px;color:var(--paper);background:var(--accent)}#spyScroller{height:390px;overflow:auto;scroll-behavior:smooth;scroll-snap-type:y proximity;border:1px solid var(--line);border-radius:18px}#spyScroller section{display:grid;min-height:360px;align-content:center;padding:clamp(24px,6vw,64px);scroll-snap-align:start;border-bottom:1px solid var(--line)}@media(max-width:650px){.section-spy{grid-template-columns:1fr}.section-spy nav{grid-auto-flow:column;overflow:auto;border-left:0;border-bottom:3px solid var(--line)}.section-spy nav a{white-space:nowrap}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}.similarity-shell{--similarity-density:100;display:grid;gap:18px;padding:clamp(18px,4vw,28px);border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:var(--shadow)}.similarity-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.similarity-head h2{margin:.2em 0}.similarity-head output{padding:10px 14px;border-left:4px solid var(--accent);font-weight:900}.similarity-layout{display:grid;grid-template-columns:minmax(220px,.58fr) minmax(0,1.42fr);gap:16px}.similarity-console{display:grid;align-content:start;gap:16px;padding:18px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--secondary) 10%,var(--paper))}.similarity-modes{display:grid;gap:8px;padding:0;border:0}.similarity-console label{display:grid;gap:8px}.similarity-console input[type="range"]{width:100%}.similarity-pin{display:flex;gap:10px;align-items:center}.similarity-checklist,.similarity-log{display:grid;gap:8px;padding-left:18px;margin:0}.similarity-checklist li.is-done{color:var(--accent);font-weight:900}.similarity-stage{display:grid;gap:14px;min-width:0}.similarity-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.similarity-deck article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--paper);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.similarity-deck article[data-active="true"]{transform:translateY(-4px);box-shadow:0 14px 28px color-mix(in srgb,var(--accent) 16%,transparent);background:color-mix(in srgb,var(--secondary) 14%,var(--paper))}.similarity-deck span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.similarity-core-shell{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px dashed var(--line);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 8%,transparent),transparent 80%)}.similarity-core-shell>*{display:block;width:calc(10000%/var(--similarity-density));max-width:none;transform:scale(calc(var(--similarity-density)/100));transform-origin:top center}.similarity-shell[data-review-state="compare"] .similarity-core-shell{border-style:solid;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.similarity-shell[data-review-state="compare"] .similarity-deck article{opacity:.72}.similarity-shell[data-review-state="compare"] .similarity-deck article[data-active="true"]{opacity:1}.similarity-shell[data-review-state="audit"] .similarity-console{color:var(--paper);background:var(--ink)}.similarity-shell[data-review-state="audit"] .similarity-console .action{color:var(--paper);border-color:var(--paper)}.similarity-shell[data-review-state="audit"] .similarity-log li{border-left:3px solid var(--secondary);padding-left:8px}.similarity-shell[data-pinned="true"] .similarity-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}@media(max-width:920px){.similarity-layout{grid-template-columns:1fr}.similarity-deck{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.similarity-head{align-items:stretch;flex-direction:column}.similarity-deck{grid-template-columns:1fr}.similarity-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="dark-neon" data-composition="split-note">
<main class="page">
<header class="mast"><div><span class="eyebrow">dark-neon / navegación por secciones / BEGINNER</span><h1>Navegación por secciones del tablón de anuncios de la clínica</h1><p class="intro">En el escenario del tablón de anuncios de consultas externas, completa una navegación por secciones: incluye contenido real, controles operables, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.</p></div><span class="scenario">Tablón de anuncios de la consulta</span></header>
<div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Domina la estructura semántica, la disposición adaptable, la navegación por teclado y la sincronización de estados de la navegación por secciones.</span></aside><section class="demo" aria-label="Área interactiva de navegación por secciones del tablón de anuncios de la consulta"><div id="similarityShell" class="similarity-shell" data-review-state="focus"><header class="similarity-head"><div><span class="eyebrow">Tablón de anuncios ambulatorio / REVIEW STUDIO</span><h2>Puesto de control de revisión de navegación por secciones</h2><p>Coloca el caso principal en una envoltura de revisión independiente y registra además el modo de observación, los puntos de control y la conclusión actual.</p></div><output id="similarityState">Listo para iniciar la revisión</output></header><div class="similarity-layout"><aside class="similarity-console"><fieldset class="similarity-modes"><legend>Vista de revisión</legend><button class="action primary" type="button" data-review-view="focus">Vista principal enfocada</button><button class="action" type="button" data-review-view="compare">Lista de comprobación</button><button class="action" type="button" data-review-view="audit">Registrar en el lugar</button></fieldset><label>Observación de densidad<input id="similarityDensity" type="range" min="84" max="124" value="100"><output id="similarityDensityValue">100%</output></label><label class="similarity-pin"><input id="similarityPin" type="checkbox"> Fijar el punto de comprobación actual</label><ol id="similarityChecklist" class="similarity-checklist"><li>Colaboración en el tablón de anuncios de la clínica</li><li>Progreso del tablón de anuncios de la consulta</li><li>Recordatorio del tablón de anuncios de la clínica</li><li>Archivo del tablón de anuncios de la consulta externa</li></ol><button id="similarityCapture" class="action primary" type="button">Registrar punto de control</button><ol id="similarityLog" class="similarity-log"><li>Esperando el primer registro de inspección</li></ol></aside><section class="similarity-stage"><div id="similarityDeck" class="similarity-deck"><article data-active="true"><span>01</span><strong>Colaboración en el tablón de anuncios de la clínica</strong><p>Comprueba si los cambios de estado son visibles</p></article><article><span>02</span><strong>Progreso del tablón de anuncios de la consulta</strong><p>Confirma que el teclado y el clic ofrecen la misma entrada</p></article><article><span>03</span><strong>Recordatorio del tablón de anuncios de la clínica</strong><p>Observa si el diseño retrocede en pantallas estrechas</p></article><article><span>04</span><strong>Archivo del tablón de anuncios de la consulta externa</strong><p>Registrar la conclusión de la revisión actual</p></article></div><div id="similarityCoreShell" class="similarity-core-shell"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Tablón de anuncios de consulta externa SESSION</span><h2>Pizarra de horarios del tablón de anuncios de la clínica ambulatoria</h2></div><output id="workflowSessionClock">00:45</output><label>Duración de la ronda<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>segundo</span></label><button id="workflowSessionToggle" class="action primary" type="button">Iniciar entrada a la ruta</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Progreso del tablón de anuncios de la consulta" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:navigation-menus-section-spy --><div class="section-spy"><nav aria-label="Capítulo del artículo"><a href="#spySection0" aria-current="location">01 colaboración del tablón de anuncios de la clínica</a><a href="#spySection1" data-core-bridge="navigation-menus-section-spy">02 progreso del tablón de avisos de la consulta externa</a><a href="#spySection2">03 Recordatorio del tablón de anuncios de la clínica</a><a href="#spySection3">04 Favoritos del tablón de anuncios de la consulta externa</a></nav><article id="spyScroller" tabindex="0" aria-label="Secciones desplazables"><section id="spySection0" tabindex="-1"><span class="eyebrow">SECTION 1</span><h2>Colaboración en el tablón de anuncios de la clínica</h2><p>Este es el contenido completo del área usado para demostrar el anclaje de secciones. Al hacer clic en el índice de la izquierda, la vista se desplazará suavemente y la posición actual se sincronizará.</p><p>Los usuarios de teclado también pueden enfocar el área desplazable para seguir leyendo.</p></section><section id="spySection1" tabindex="-1"><span class="eyebrow">SECTION 2</span><h2>Progreso del tablón de anuncios de la consulta</h2><p>Este es el contenido completo del área usado para demostrar el anclaje de secciones. Al hacer clic en el índice de la izquierda, la vista se desplazará suavemente y la posición actual se sincronizará.</p><p>Los usuarios de teclado también pueden enfocar el área desplazable para seguir leyendo.</p></section><section id="spySection2" tabindex="-1"><span class="eyebrow">SECTION 3</span><h2>Recordatorio del tablón de anuncios de la clínica</h2><p>Este es el contenido completo del área usado para demostrar el anclaje de secciones. Al hacer clic en el índice de la izquierda, la vista se desplazará suavemente y la posición actual se sincronizará.</p><p>Los usuarios de teclado también pueden enfocar el área desplazable para seguir leyendo.</p></section><section id="spySection3" tabindex="-1"><span class="eyebrow">SECTION 4</span><h2>Archivo del tablón de anuncios de la consulta externa</h2><p>Este es el contenido completo del área usado para demostrar el anclaje de secciones. Al hacer clic en el índice de la izquierda, la vista se desplazará suavemente y la posición actual se sincronizará.</p><p>Los usuarios de teclado también pueden enfocar el área desplazable para seguir leyendo.</p></section></article></div><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 puntos de interacción</strong><ol id="workflowSessionLaps" aria-label="Registro de ronda"></ol></footer></div></div></section></div></div><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:navigation-menus-section-spy */
const spyLinks=[...document.querySelectorAll('.section-spy nav a')];spyLinks.forEach(link=>link.addEventListener('click',event=>{event.preventDefault();spyLinks.forEach(item=>item.removeAttribute('aria-current'));link.setAttribute('aria-current','location');const section=document.querySelector(link.getAttribute('href'));section.scrollIntoView({behavior:matchMedia('(prefers-reduced-motion:reduce)').matches?'auto':'smooth',block:'start'});section.focus({preventScroll:true});announce('Ubicado '+link.textContent.trim());}));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"navigation-menus-section-spy","selector":"[data-core-bridge=\"navigation-menus-section-spy\"]","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 workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' puntos de control de interacción';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Reiniciar':'Siguiente turno';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Turno completado del tablón de anuncios de consultas':'La ronda se ha pausado');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Ronda en pausa';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('La ronda del tablón de anuncios del consultorio ha comenzado · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('operación con teclado');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Operación principal · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
const similarityShell=document.querySelector('#similarityShell');const similarityState=document.querySelector('#similarityState');const similarityDensity=document.querySelector('#similarityDensity');const similarityDensityValue=document.querySelector('#similarityDensityValue');const similarityPin=document.querySelector('#similarityPin');const similarityChecklistItems=[...document.querySelectorAll('#similarityChecklist li')];const similarityDeckItems=[...document.querySelectorAll('#similarityDeck article')];const similarityLog=document.querySelector('#similarityLog');const similarityNotes=["Colaboración en el tablón de anuncios de la clínica","Progreso del tablón de anuncios de la consulta","Recordatorio del tablón de anuncios de la clínica","Archivo del tablón de anuncios de la consulta externa"];const similarityCore=document.querySelector('#workflowCore');let similarityCaptures=0;function similaritySetActive(index){similarityDeckItems.forEach((item,itemIndex)=>{if(itemIndex===index)item.setAttribute('data-active','true');else item.removeAttribute('data-active');});}function similarityRender(reason){const version=similarityCore?.dataset.workflowVersion||'0';const density=Number(similarityDensity.value);similarityShell.style.setProperty('--similarity-density',String(density));similarityShell.dataset.pinned=String(similarityPin.checked);similarityDensityValue.textContent=density+'%';similarityChecklistItems.forEach((item,index)=>item.classList.toggle('is-done',index<similarityCaptures));similaritySetActive(Math.min(similarityDeckItems.length-1,similarityCaptures%similarityDeckItems.length));similarityState.textContent=reason+' · versión principal '+version+(similarityPin.checked?' · fijado':'');}document.querySelectorAll('[data-review-view]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-review-view]').forEach(item=>item.classList.toggle('primary',item===button));similarityShell.dataset.reviewState=button.dataset.reviewView;similarityRender('Se ha cambiado a'+button.textContent);announce('Vista de revisión:'+button.textContent);}));similarityDensity.addEventListener('input',()=>{similarityRender('La densidad de observación se ha actualizado');announce('Observación de densidad '+similarityDensity.value+'%');});similarityPin.addEventListener('change',()=>{similarityRender(similarityPin.checked?'El punto de control actual está fijado':'El punto de control actual está desbloqueado');announce(similarityPin.checked?'Punto de control fijado':'Punto de control fijo cancelado');});document.querySelector('#similarityCapture').addEventListener('click',()=>{const note=similarityNotes[similarityCaptures%similarityNotes.length];const version=similarityCore?.dataset.workflowVersion||'0';similarityCaptures+=1;const item=document.createElement('li');item.textContent='Punto de control '+similarityCaptures+' · '+note+' · versión principal '+version;const empty=similarityLog.querySelector('li')?.textContent==='Esperando el primer registro de inspección';if(empty)similarityLog.replaceChildren(item);else similarityLog.prepend(item);while(similarityLog.children.length>6)similarityLog.lastElementChild.remove();similarityRender('Punto de control registrado '+similarityCaptures);announce('Punto de control registrado '+similarityCaptures+' · '+note);});similarityCore?.addEventListener('focusin',()=>similarityRender('La vista principal ha recibido el foco'));similarityCore?.addEventListener('click',()=>similarityRender('Se produjo una interacción en la vista principal'));similarityRender('Listo para iniciar la revisión');
</script>
</body>
</html>