/* Responsive: móvil 320px → tablet → escritorio → 4K/ultra-wide. Unidades fluidas con clamp(). */
:root{--g1:#a8a8a8;--g2:#6e6e6e;--rojo:#d32f2f;--nar:#ff6b35;--fos:#00ff41;--fs:clamp(17px,.55vw + 14.5px,30px)}
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:#15171a radial-gradient(#22262b 1px,transparent 1px) 0 0/14px 14px;color:#ddd;font-family:'VT323',monospace,monospace;font-size:var(--fs);overflow-x:hidden;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.sr{position:absolute;left:-9999px}
main{width:min(100%,1500px);margin:auto;padding:clamp(10px,2.5vw,32px);display:grid;gap:clamp(12px,2.5vw,32px);grid-template-columns:minmax(0,1fr)}
.robot-zona{text-align:center}
#robot{width:clamp(130px,42vw,260px);height:auto;filter:drop-shadow(0 8px 10px #000)}
.burbuja{background:#000;color:var(--fos);border:2px solid var(--g2);padding:.5em;min-height:3.2em;margin:.4em 0;overflow-wrap:anywhere}
.consola h1{margin:0 0 .3em;color:var(--rojo);font-size:clamp(1.6em,5vw,2.6em);letter-spacing:.1em;line-height:1}
.consola h1 small{display:block;color:var(--g1);font-size:.4em;letter-spacing:0;margin-top:.3em}
textarea{width:100%;min-height:7em;background:#000;color:var(--fos);border:3px solid var(--g2);font:inherit;padding:.6em;resize:vertical;text-shadow:0 0 6px var(--fos);caret-color:var(--fos)}
textarea:focus,button:focus-visible,input:focus-visible{outline:3px solid var(--nar)}
.botones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55em;margin:.7em 0}
.fisico{font:inherit;min-height:44px;color:#111;padding:.6em .5em;border:0;border-radius:6px;cursor:pointer;box-shadow:0 6px 0 #0006,inset 0 2px 0 #fff5;transition:transform .08s,box-shadow .08s;touch-action:manipulation;overflow-wrap:anywhere}
.fisico:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 #0006}
.fisico:disabled{opacity:.4;cursor:not-allowed}
.rojo{background:var(--rojo);color:#fff;font-size:1.3em;grid-column:1/-1;order:-1}.gris{background:var(--g1)}.amarillo{background:#fbc02d}.verde{background:#43a047;color:#fff}
.amarillo[aria-pressed=true]{background:var(--nar);box-shadow:0 0 14px var(--nar)}
.lt{display:flex;gap:.5em;align-items:flex-start;font-size:.8em;color:var(--g1);margin:.4em 0}.lt input{width:1.2em;height:1.2em;flex:none;margin-top:.15em}
.salida{background:#000;border:2px solid var(--g2);padding:.6em;min-height:3em;color:var(--fos);line-height:1.5;overflow-wrap:anywhere;max-height:60dvh;overflow:auto}
.salida:empty{display:none}
del{color:#ff5252;background:#ff52521f}ins{color:#69f0ae;text-decoration:none;background:#69f0ae1f;font-weight:bold}
.contador{font-size:1.3em;margin:.4em 0;overflow-wrap:anywhere}.lista{padding-left:1.4em;color:#ffd0b8;overflow-wrap:anywhere}.lista li{margin:.4em 0}
/* ≥ 480px: botones en una fila de 3 */
@media(min-width:480px){.botones{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ≥ 760px (tablet / escritorio): robot a la izquierda, fijo al hacer scroll */
@media(min-width:760px){main{grid-template-columns:minmax(220px,28%) minmax(0,1fr);align-items:start}.robot-zona{position:sticky;top:12px}#robot{width:100%;max-width:300px}}
/* Móviles en horizontal / pantallas bajas: robot más pequeño */
@media(max-height:520px) and (orientation:landscape){main{grid-template-columns:minmax(120px,22%) minmax(0,1fr)}#robot{width:100%;max-width:150px}.robot-zona{position:sticky;top:6px}.salida{max-height:45dvh}}
/* Pantallas muy pequeñas (320px, plegables cerrados) */
@media(max-width:360px){.botones{grid-template-columns:minmax(0,1fr)}:root{--fs:16px}}
/* Pantallas grandes: 2K, 4K, ultra-wide */
@media(min-width:1800px){main{width:min(100%,2000px)}}
/* Animaciones del robot */
.ojo{fill:#3a0a0a;transition:fill .3s}
#robot.encendido .ojo{fill:var(--rojo);filter:drop-shadow(0 0 5px red)}
#robot.apagado #antena{fill:#444}
#robot.encendido #antena{animation:pulso 1.4s infinite}
#robot.habla .ojo{animation:parpadeo .25s steps(2) 6}
#robot.error{animation:temblor .12s linear 8}
#robot.error #antena{animation:pulso .25s infinite}
#robot.furia .ojo{fill:#ff1744;filter:drop-shadow(0 0 12px #ff1744)}
.humo{opacity:0;fill:#999}
#robot.humo-on .humo{opacity:.7}
#robot.humo-on .humo circle{animation:sube 1.6s infinite}
#robot.humo-on .humo circle:nth-child(2){animation-delay:.5s}#robot.humo-on .humo circle:nth-child(3){animation-delay:1s}
@keyframes pulso{50%{fill:#ff8a80;r:12}}
@keyframes parpadeo{50%{opacity:.2}}
@keyframes temblor{25%{transform:translate(-4px,1px)}75%{transform:translate(4px,-1px)}}
@keyframes sube{0%{transform:translateY(10px);opacity:.8}100%{transform:translateY(-35px);opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}