/* ElectraLab beta · Accesibilidad (a11y1022) */
@font-face{font-family:"ELA11Y Atkinson";font-style:normal;font-weight:400;font-display:swap;src:url(a11y-atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"ELA11Y Atkinson";font-style:normal;font-weight:400;font-display:swap;src:url(a11y-atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"ELA11Y Atkinson";font-style:normal;font-weight:700;font-display:swap;src:url(a11y-atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"ELA11Y Atkinson";font-style:normal;font-weight:700;font-display:swap;src:url(a11y-atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- foco visible (siempre) ---------- */
html body :focus-visible{outline:3px solid #ffd400!important;outline-offset:2px!important}
html body .lab-canvas:focus-visible{outline-offset:-3px!important}
.a11y-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* ---------- saltar al contenido ---------- */
.a11y-skip{position:fixed;left:8px;top:-200px;z-index:2147483646;background:#ffd400;color:#000;font:700 1rem/1.3 system-ui,sans-serif;padding:.7rem 1rem;border-radius:8px;text-decoration:underline;box-shadow:0 2px 10px #0008}
.a11y-skip:focus{top:8px}
.a11y-skip+.a11y-skip:focus{top:8px;left:8px}

/* ---------- lanzador ---------- */
.a11y-fab{position:fixed;right:var(--a11y-fab-r,12px);bottom:var(--a11y-fab-b,58px);z-index:2147483000;display:flex;gap:8px;align-items:center}
.a11y-fab button{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;min-width:44px;padding:.55rem .9rem;border-radius:999px;border:2px solid #fff;background:#0b1a6b;color:#fff;font:600 .95rem/1.1 var(--font,system-ui),system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 16px #0009}
.a11y-fab button:hover{background:#1530b8}
.a11y-fab .a11y-mic{padding:.55rem .7rem}
.a11y-fab .a11y-mic[aria-pressed="true"]{background:#b00020;border-color:#ffd400}
.a11y-fab .a11y-mic:disabled{opacity:.55;cursor:not-allowed}
.a11y-fab svg{width:1.25rem;height:1.25rem;flex:none}
@media (max-width:640px){.a11y-fab .a11y-fab-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.a11y-fab button{padding:.55rem .7rem}}

/* ---------- diálogos ---------- */
dialog.a11y-dlg{border:2px solid #9fb0ff;border-radius:14px;background:#0a1230;color:#f3f5ff;padding:0;max-width:min(560px,calc(100vw - 16px));max-height:calc(100dvh - 16px);font:400 1rem/1.5 var(--font,system-ui),system-ui,sans-serif;box-shadow:0 10px 40px #000c}
dialog.a11y-dlg::backdrop{background:#000a}
dialog.a11y-panel{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(420px,100vw);max-width:100vw;border-radius:0;border-width:0 0 0 2px}
.a11y-dlg-in{padding:1rem 1.1rem 1.4rem;overflow:auto;max-height:inherit;box-sizing:border-box}
dialog.a11y-panel .a11y-dlg-in{height:100%}
.a11y-dlg h2{font-size:1.3rem;margin:0 0 .6rem;line-height:1.25;color:#fff}
.a11y-dlg h3{font-size:1.05rem;margin:0;color:#fff}
.a11y-dlg p{margin:.4rem 0}
.a11y-dlg a{color:#9fd3ff}
.a11y-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;position:sticky;top:-1rem;background:#0a1230;padding:.2rem 0 .4rem;z-index:1}
.a11y-x{min-width:44px;min-height:44px;border-radius:10px;border:2px solid #9fb0ff;background:transparent;color:#fff;font-size:1.3rem;cursor:pointer}
.a11y-dlg details{border:1px solid #33407a;border-radius:10px;margin:.55rem 0;background:#0d1740}
.a11y-dlg summary{cursor:pointer;padding:.65rem .8rem;font-weight:700;min-height:44px;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;list-style:none}
.a11y-dlg summary::-webkit-details-marker{display:none}
.a11y-dlg summary::before{content:"▸";display:inline-block;width:1em}
.a11y-dlg details[open]>summary::before{content:"▾"}
.a11y-sec{padding:.2rem .85rem .8rem}
.a11y-row{display:flex;align-items:flex-start;gap:.6rem;margin:.45rem 0}
.a11y-row input[type=checkbox]{width:1.35rem;height:1.35rem;margin:.1rem 0 0;flex:none;accent-color:#ffd400}
.a11y-row label{flex:1}
.a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem .9rem;border-radius:10px;border:2px solid #9fb0ff;background:#15246e;color:#fff;font:600 .95rem/1.2 inherit;font-family:inherit;cursor:pointer;margin:.2rem .3rem .2rem 0}
.a11y-btn:hover{background:#1f33a0}
.a11y-btn.pri{background:#ffd400;color:#000;border-color:#ffd400}
.a11y-btn:disabled{opacity:.55;cursor:not-allowed}
.a11y-seg{display:flex;flex-wrap:wrap;gap:.35rem;border:0;padding:0;margin:.3rem 0}
.a11y-seg legend{padding:0;margin-bottom:.3rem;font-weight:600}
.a11y-seg label{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .7rem;border:2px solid #4a5aa8;border-radius:10px;cursor:pointer}
.a11y-seg input{accent-color:#ffd400;width:1.1rem;height:1.1rem}
.a11y-seg label:has(input:checked){border-color:#ffd400;background:#2a2a00}
.a11y-note{font-size:.9rem;color:#d4dbff}
.a11y-warn{border-left:4px solid #ffd400;background:#2a2600;color:#fff7c2;padding:.5rem .7rem;border-radius:6px;margin:.5rem 0}
.a11y-err{border-left:4px solid #ff8a8a;background:#3a0d16;color:#ffe2e2;padding:.5rem .7rem;border-radius:6px;margin:.5rem 0}
.a11y-dlg kbd{font:600 .85rem/1 ui-monospace,monospace;background:#1b2a6b;border:1px solid #6b7bd0;border-bottom-width:2px;border-radius:5px;padding:.15rem .35rem;color:#fff}
.a11y-keys{margin:.3rem 0;padding:0;list-style:none}
.a11y-keys li{margin:.35rem 0}
.a11y-cmds{margin:.3rem 0 .3rem 1.1rem;padding:0}
.a11y-cmds li{margin:.25rem 0}
.a11y-video video{width:100%;height:auto;background:#000;border-radius:8px}

/* ---------- indicador de escucha ---------- */
.a11y-listen{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:2147483645;display:none;align-items:center;gap:.6rem;max-width:calc(100vw - 20px);box-sizing:border-box;padding:.55rem .6rem .55rem .9rem;border-radius:999px;background:#b00020;color:#fff;border:2px solid #ffd400;font:700 1rem/1.25 var(--font,system-ui),system-ui,sans-serif;box-shadow:0 6px 24px #000a}
.a11y-listen.on{display:flex}
.a11y-listen .dot{width:.85rem;height:.85rem;border-radius:50%;background:#ffd400;flex:none;animation:a11yPulse 1.1s ease-in-out infinite}
.a11y-listen .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.a11y-listen .int{font-weight:400;font-style:italic}
.a11y-listen button{min-height:36px;border-radius:999px;border:2px solid #fff;background:#000;color:#fff;font:600 .9rem/1 inherit;padding:0 .8rem;cursor:pointer;flex:none}
@keyframes a11yPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* ---------- avisos visuales ---------- */
.a11y-toasts{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:2147483644;display:flex;flex-direction:column;gap:.4rem;width:min(480px,calc(100vw - 20px));pointer-events:none}
.a11y-toast{pointer-events:none;opacity:.97;display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .8rem;border-radius:10px;background:#0a1230;color:#fff;border:2px solid #9fb0ff;box-shadow:0 6px 20px #000b;font:600 .95rem/1.35 var(--font,system-ui),system-ui,sans-serif;transition:opacity .3s}
.a11y-toast .ic{flex:none;font-size:1.1rem}
.a11y-toast.err{border-color:#ff8a8a;background:#3a0d16}
.a11y-toast.ok{border-color:#7ee2b8;background:#0b3324}
.a11y-toast.say{border-color:#ffd400}
.a11y-toast button{pointer-events:auto;margin-left:auto;background:transparent;border:0;color:#fff;font-size:1.1rem;cursor:pointer;min-width:32px;min-height:32px}
.a11y-flash{position:fixed;inset:0;z-index:2147483643;pointer-events:none;box-shadow:inset 0 0 0 6px #ffd400,inset 0 0 40px 10px #ffd40055;opacity:0;transition:opacity .45s ease-out}
.a11y-flash.err{box-shadow:inset 0 0 0 6px #ff8a8a,inset 0 0 40px 10px #ff8a8a55}
.a11y-flash.ok{box-shadow:inset 0 0 0 6px #7ee2b8,inset 0 0 40px 10px #7ee2b855}
.a11y-flash.on{opacity:1;transition:none}

/* ---------- vista de texto ---------- */
.a11y-tv{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:2147483100;background:#0a1230;color:#f3f5ff;border-left:2px solid #9fb0ff;box-shadow:-8px 0 30px #000a;overflow:auto;font:400 1rem/1.5 var(--font,system-ui),system-ui,sans-serif;padding:0 1rem 6rem;box-sizing:border-box}
.a11y-tv[hidden]{display:none}
.a11y-tv h2{font-size:1.25rem;margin:0}
.a11y-tv h3{font-size:1.05rem;margin:1rem 0 .4rem;color:#fff}
.a11y-tv .a11y-head{top:0;padding:.7rem 0 .5rem}
.a11y-tv ul.a11y-list{list-style:none;margin:0;padding:0}
.a11y-tv .a11y-item{border:1px solid #33407a;border-radius:10px;padding:.55rem .7rem;margin:.45rem 0;background:#0d1740}
.a11y-tv .a11y-item.sel{border-color:#ffd400}
.a11y-tv .a11y-item h4{margin:0;font-size:1rem}
.a11y-tv .a11y-item p{margin:.2rem 0;font-size:.95rem}
.a11y-tv .a11y-acts{display:flex;flex-wrap:wrap;gap:.25rem}
.a11y-tv form{border:1px solid #33407a;border-radius:10px;padding:.6rem .7rem;margin:.4rem 0;background:#0d1740}
.a11y-tv .fld{display:flex;flex-direction:column;gap:.2rem;margin:.35rem 0}
.a11y-tv .fld label{font-weight:600}
.a11y-tv select,.a11y-tv input[type=text],.a11y-tv input[type=number]{min-height:44px;border-radius:8px;border:2px solid #9fb0ff;background:#050a22;color:#fff;font:inherit;padding:0 .5rem;max-width:100%;box-sizing:border-box}
.a11y-tv .inl{display:flex;gap:.4rem;flex-wrap:wrap;align-items:flex-end}
.a11y-tv .inl .fld{flex:1 1 9rem}
.a11y-tv output{display:block;margin-top:.4rem;font-weight:700;color:#fff7c2}
.a11y-tv .net{display:inline-block;min-width:2.4em;text-align:center;font:700 .8rem/1.6 ui-monospace,monospace;border-radius:5px;padding:0 .3rem;margin-right:.3rem;color:#000}

/* ---------- paso a paso ---------- */
.a11y-steps{position:fixed;right:var(--a11y-fab-r,12px);bottom:110px;z-index:2147482999;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 180px);overflow:auto;box-sizing:border-box;background:#0a1230;color:#fff;border:2px solid #ffd400;border-radius:14px;padding:.75rem .9rem;box-shadow:0 8px 28px #000b;font:400 1rem/1.5 var(--font,system-ui),system-ui,sans-serif}
.a11y-steps[hidden]{display:none}
.a11y-steps h2{font-size:1.05rem;margin:0 0 .3rem;display:flex;justify-content:space-between;align-items:center;gap:.4rem}
.a11y-steps .now{font-size:1.1rem;font-weight:700;margin:.3rem 0}
.a11y-steps ol{margin:.3rem 0 0 1.2rem;padding:0}
.a11y-steps li.done{color:#9fe8c4}
.a11y-steps li.done::marker{content:"✓ "}
.a11y-steps li.cur{font-weight:700;color:#ffd400}
.a11y-steps.min{width:auto}
.a11y-steps.min .body{display:none}

/* ---------- overlay del banco (etiquetas y patrones) ---------- */
.a11y-ov{position:absolute;pointer-events:none;z-index:3;overflow:hidden}
.a11y-ov text{font:700 11px/1 ui-monospace,monospace;paint-order:stroke;stroke:#000;stroke-width:3px}

/* ---------- preferencias ---------- */
html[data-a11y-text="125"]{font-size:125%}
html[data-a11y-text="150"]{font-size:150%}
html[data-a11y-text="200"]{font-size:200%}
html[data-a11y-text] body{overflow-wrap:anywhere}

html.a11y-dys{--font:"ELA11Y Atkinson","Atkinson Hyperlegible",Verdana,sans-serif;--display:"ELA11Y Atkinson","Atkinson Hyperlegible",Verdana,sans-serif}
html.a11y-dys body,html.a11y-dys #root,html.a11y-dys #root *:not(code):not(pre):not(kbd):not(.console-body):not(.console-body *),html.a11y-dys .a11y-dlg,html.a11y-dys .a11y-tv,html.a11y-dys .a11y-steps{font-family:"ELA11Y Atkinson","Atkinson Hyperlegible",Verdana,sans-serif!important}
html.a11y-space body,html.a11y-space #root,html.a11y-space .a11y-dlg,html.a11y-space .a11y-tv,html.a11y-space .a11y-steps{line-height:1.6!important;letter-spacing:.06em!important;word-spacing:.16em!important}
html.a11y-space #root p,html.a11y-space .a11y-dlg p,html.a11y-space .a11y-tv p{margin-bottom:1em!important}
html.a11y-space #root *{line-height:1.55!important}

html.a11y-rm *,html.a11y-rm *::before,html.a11y-rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){.a11y-listen .dot{animation:none}.a11y-flash{transition:none}}
html.a11y-rm .a11y-listen .dot{animation:none}

html.a11y-hc{--bg0:#000;--bg1:#000;--bg2:#000;--panel:#000;--panel-solid:#000;--line:#fff;--line-strong:#ffd400;--text:#fff;--muted:#f0f0f0;--accent:#ffd400;--accent-bright:#7fd4ff;--accent2:#ffd400;--neon:#ffd400;--danger:#ff9a9a;--info:#7fd4ff;--glow:none;--glow-mag:none;--glass:none}
html.a11y-hc body,html.a11y-hc #root{background:#000!important;color:#fff!important}
html.a11y-hc #root *{text-shadow:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.a11y-hc #root .glass-panel,html.a11y-hc #root .panel,html.a11y-hc #root header,html.a11y-hc #root footer,html.a11y-hc #root aside,html.a11y-hc #root section,html.a11y-hc #root .canvas-frame,html.a11y-hc #root .elb-aula-card{background:#000!important;border-color:#fff!important}
html.a11y-hc #root .hero-atmosphere,html.a11y-hc #root .hero-traces{display:none!important}
html.a11y-hc #root button,html.a11y-hc #root .btn,html.a11y-hc #root [role=button],html.a11y-hc #root a{background:#000!important;color:#fff!important;border:2px solid #fff!important;background-image:none!important}
html.a11y-hc #root button.active,html.a11y-hc #root .btn.primary,html.a11y-hc #root [aria-pressed=true],html.a11y-hc #root .challenge-item.active{background:#ffd400!important;color:#000!important;border-color:#ffd400!important}
html.a11y-hc #root button:disabled{color:#bbb!important;border-style:dashed!important}
html.a11y-hc #root input,html.a11y-hc #root textarea,html.a11y-hc #root select{background:#000!important;color:#fff!important;border:2px solid #fff!important}
html.a11y-hc #root ::placeholder{color:#ccc!important;opacity:1}
html.a11y-hc #root p,html.a11y-hc #root span,html.a11y-hc #root strong,html.a11y-hc #root h1,html.a11y-hc #root h2,html.a11y-hc #root h3,html.a11y-hc #root label,html.a11y-hc #root li,html.a11y-hc #root div{color:inherit}
html.a11y-hc #root .hero-brand span{color:#ffd400!important;-webkit-text-fill-color:#ffd400!important;background:none!important}
html.a11y-hc #root .hero-brand{-webkit-text-fill-color:#fff!important;background:none!important}
html.a11y-hc #root .lab-canvas{filter:contrast(1.35) brightness(1.15)}
html.a11y-hc .sl-legal a{color:#fff!important}
html.a11y-hc .a11y-dlg,html.a11y-hc .a11y-tv,html.a11y-hc .a11y-steps,html.a11y-hc .a11y-dlg details,html.a11y-hc .a11y-tv .a11y-item,html.a11y-hc .a11y-tv form,html.a11y-hc .a11y-head{background:#000!important;border-color:#fff!important}
html.a11y-hc .a11y-fab button{background:#000;border-color:#ffd400}

/* daltonismo: estados con icono además del color (Okabe-Ito) */
html.a11y-cb{--danger:#E69F00;--info:#56B4E9;--accent-bright:#56B4E9;--neon-mag:#CC79A7}
html.a11y-cb .console-body .ok::before{content:"✓ ";font-weight:700}
html.a11y-cb .console-body .err::before{content:"⚠ ";font-weight:700}
html.a11y-cb .console-body .err{color:#E69F00!important;text-decoration:underline wavy}
html.a11y-cb #root .ok{color:#56B4E9!important}
html.a11y-cb .a11y-toast.err{border-color:#E69F00;border-style:dashed}
html.a11y-cb .a11y-toast.ok{border-color:#56B4E9}
html.a11y-cb .a11y-flash.err{box-shadow:inset 0 0 0 6px #E69F00,inset 0 0 40px 10px #E69F0055}
html.a11y-cb .a11y-flash.ok{box-shadow:inset 0 0 0 6px #56B4E9,inset 0 0 40px 10px #56B4E955}

@media (max-width:640px){
  .a11y-toasts{top:56px}
  .a11y-steps{right:8px;left:8px;width:auto;bottom:108px;max-height:45dvh}
  .a11y-listen{top:6px}
}
@media (max-height:560px){.a11y-steps{max-height:calc(100dvh - 150px);bottom:104px}}
/* --- vista de texto / paso a paso (complementos) --- */
.a11y-tv .a11y-inl{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;border:0;padding:0;margin:.3rem 0;background:none;width:100%}
.a11y-tv .a11y-inl label{flex:1 1 100%;font-weight:600;font-size:.95rem}
.a11y-tv .a11y-inl input{flex:1 1 7rem;min-width:0}
.a11y-tv .a11y-pins{margin:.2rem 0 .3rem 1.1rem;padding:0;font-size:.95rem}
.a11y-tv .a11y-wire{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;border-bottom:1px solid #33407a;padding:.35rem 0}
.a11y-tv .a11y-wire span:first-child{flex:1 1 12rem}
.a11y-net{display:inline-block;min-width:2.4em;text-align:center;font:700 .8rem/1.6 ui-monospace,monospace;border-radius:5px;padding:0 .3rem;color:#000;background:var(--net,#fff);border:2px solid #000;outline:1px solid var(--net,#fff)}
.a11y-badge{display:inline-block;font-size:.75rem;font-weight:700;background:#ffd400;color:#000;border-radius:999px;padding:0 .5rem;vertical-align:middle}
.a11y-tv .a11y-out{display:block;margin-top:.4rem;font-weight:700;color:#fff7c2}
.a11y-tv .a11y-acts .a11y-btn,.a11y-steps .a11y-btn{margin:.15rem .25rem .15rem 0}
.a11y-btn.sm{min-height:36px;padding:0 .6rem;font-size:.9rem}
.a11y-st-head{display:flex;justify-content:space-between;align-items:center;gap:.4rem}
.a11y-st-head h2{margin:0!important}
.a11y-steps li.done::marker{content:normal}
.a11y-steps details summary{cursor:pointer;margin-top:.3rem}
html.a11y-hc .a11y-tv,html.a11y-hc .a11y-steps,html.a11y-hc .a11y-dlg{background:#000!important;color:#fff!important;border-color:#ffff00!important}
html.a11y-hc .a11y-tv .a11y-item,html.a11y-hc .a11y-tv form{background:#000!important;border-color:#fff!important}
@media (max-width:640px){.a11y-steps{max-height:38dvh}}
@media (max-height:620px){.a11y-steps{max-height:calc(100dvh - 200px)}}
.a11y-steps{bottom:calc(var(--a11y-fab-b,58px) + 54px)!important}
@media (max-width:640px){.a11y-toast:not(:last-child){display:none}.a11y-toast{font-size:.85rem;padding:.45rem .6rem}}
/* tamaños acotados para los elementos flotantes (no tapar el banco con texto al 150-200 %) */
.a11y-toast{font-size:clamp(13px,.95rem,18px)!important}
.a11y-fab button{font-size:clamp(14px,.95rem,18px)!important}
.a11y-steps{font-size:clamp(14px,1rem,19px)!important}
.a11y-steps .now{font-size:clamp(15px,1.1rem,20px)!important}
.a11y-steps h2{font-size:clamp(14px,1.05rem,19px)!important;display:block}
.a11y-st-head{flex-wrap:wrap}
.a11y-st-head .a11y-btn{flex:none}
.a11y-steps .a11y-btn{font-size:clamp(13px,.95rem,18px)!important}
