@font-face{font-family:"VT323";src:url(/fonts/vt323-latin.woff2) format("woff2");font-display:swap}
:root{--r:#ff2b2b;--g:#22e33a;--y:#ffe600;--b:#1f4fd1;--c:#00f0ff;--m:#ff3cf2;--w:#fff}
*{box-sizing:border-box}html,body{margin:0;background:#000;color:var(--w);font-family:'VT323',monospace}
body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#tv{display:flex;justify-content:center;padding:8px 6px;overflow:hidden}
.screen{width:max-content;max-width:100%;font-size:clamp(12px,min(calc((100vw - 20px) / 16),calc((100vh - 24px) / 27.6)),64px);line-height:1.15;white-space:pre;overflow:hidden;font-variant-ligatures:none}
.screen .row{height:1.15em}
.screen a{color:inherit;text-decoration:underline}
.r{color:var(--r)}.g{color:var(--g)}.y{color:var(--y)}.b{color:var(--b)}.c{color:var(--c)}.m{color:var(--m)}.w{color:var(--w)}
.bgb{background:var(--b);color:var(--w)}.bgr{background:var(--r);color:#000}.bgy{background:var(--y);color:#000}.bgg{background:var(--g);color:#000}.bgc{background:var(--c);color:#000}
.blink{animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}
.fast{display:grid;grid-template-columns:repeat(4,1fr);position:sticky;top:0;z-index:40;background:#000;padding-top:6px!important;padding-bottom:6px!important;gap:6px;max-width:640px;margin:6px auto;padding:0 8px}
.fast button,.keys button,.install{font:inherit;font-size:22px;min-height:48px;border:0;border-radius:6px;cursor:pointer}
.b-red{background:var(--r);color:#000}.b-green{background:var(--g);color:#000}.b-yellow{background:var(--y);color:#000}.b-blue{background:var(--b);color:#fff}
.pad{max-width:640px;margin:0 auto;padding:0 8px;text-align:center}
#typed{display:block;font-size:28px;color:var(--y);margin:4px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.keys button{background:#222;color:var(--w)}
button:focus-visible,a:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.install{margin-top:8px;width:100%;background:var(--c);color:#000}
.afil,.avb,.foot{max-width:640px;margin:14px auto;padding:0 12px;font-size:20px;color:#ccc}
.afil a,.avb a,.foot a{color:var(--c)}
.avb h2{color:var(--y);font-weight:normal;margin:0 0 4px}.avb ul{list-style:none;padding:0;columns:2}
.foot{text-align:center;color:#888}
.avbar{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:14px;background:rgba(20,20,40,.55);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(255,255,255,.18);transition:transform .25s,opacity .25s;font-size:18px;max-width:720px;margin:0 auto}
.avbar.hide{transform:translateY(140%);opacity:0;pointer-events:none}
.avbar-brand{color:var(--y);text-decoration:none;white-space:nowrap}
.avbar-list{display:flex;gap:10px;overflow-x:auto;flex:1;scrollbar-width:none}
.avbar-list a{color:#fff;text-decoration:none;white-space:nowrap}
.avbar-x{background:none;border:0;color:#fff;font-size:22px;min-width:40px;min-height:40px;cursor:pointer}
.ck{position:static;max-width:640px;margin:12px auto;background:#111;border:2px solid var(--y);border-radius:10px;padding:10px 12px;font-size:19px}
.ck p{margin:0 0 8px}.ck a{color:var(--c)}.ck-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-b button{font:inherit;font-size:22px;min-height:48px;border:2px solid #fff;border-radius:6px;background:#222;color:#fff;cursor:pointer}
.b-home{grid-column:1/-1;background:#fff;color:#000}
.masthead{background:var(--b);text-align:center;padding:.15em 0 .05em;margin:.1em 0}
.mh-sub{color:#fff;font-size:.8em}
.mh-big{font-size:2.35em;line-height:.9;color:#fff;letter-spacing:.06em;transform:scaleY(1.35);margin:.12em 0 .2em;text-shadow:.06em 0 0 #fff,0 .04em 0 #fff;font-weight:bold}
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:.25em .2em}
.blk{padding:.2em .25em;min-height:6.6em}
.blk-t{text-align:center;margin-bottom:.1em}
.blk a{display:block;text-decoration:none;color:#fff;white-space:pre;overflow:hidden;line-height:1.25}
.bgr a{color:#fff}.bgg a,.bgy a,.bgc a{color:#0019a8}
.bgg,.bgc{color:#000}
.strip{display:block;margin:.25em 0;padding:.05em .3em;text-decoration:none;white-space:pre;overflow:hidden}
.s-w{background:#fff;color:#0019a8}.s-y{background:var(--y);color:#0019a8}
.legend span{display:inline-block;width:10ch}
.g{color:var(--g)}
.screen a.strip,.screen .blk a{text-decoration:none}
.screen .s-w,.screen .s-y{color:#0019a8}
.screen .bgg a,.screen .bgy a,.screen .bgc a{color:#0019a8}
.blk{padding:.2em .15em;overflow:hidden}
.obras{background:repeating-linear-gradient(45deg,#ffe600 0 14px,#000 14px 28px);color:#000;text-align:center;font-size:20px;padding:2px}
.obras{text-shadow:0 0 3px #ffe600,0 0 3px #ffe600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.db{color:#0019a8}
#screen{min-height:calc(21 * 1.15em)}
.k{color:#000}.screen .bgr a{color:#000}
.b-cyan{background:var(--c);color:#000}
.ck{margin:8px auto;font-size:18px;padding:8px 10px}.ck p{margin:0 0 6px}.ck-b button{min-height:44px}
html,body{overflow-x:hidden}
@supports (width:1dvh){.screen{font-size:clamp(12px,min(calc((100vw - 20px) / 16),calc((100dvh - 24px) / 27.6)),64px)}}
@media (max-aspect-ratio:3/4){.screen{font-size:clamp(12px,calc((100vw - 20px) / 16),64px)}}
/* Móvil: sin 24 líneas vacías; botones de color + INICIO fijos encima de la barra AvilesIA */
#screen{min-height:0}
@media all{
 .fast{position:fixed;top:auto;left:0;right:0;bottom:calc(var(--avh,0px) + env(safe-area-inset-bottom));margin:0;max-width:none;z-index:45;transition:bottom .2s}
 body{padding-bottom:calc(var(--fh,64px) + var(--avh,0px) + 16px + env(safe-area-inset-bottom))}
}
@media (min-width:701px){.fast{max-width:640px;margin:0 auto}}
/* ✕ de la barra AvilesIA: [hidden] gana a display:flex; área táctil 44px por encima de todo */
.avbar[hidden]{display:none!important}
.avbar-x{min-width:44px;min-height:44px;position:relative;z-index:2;pointer-events:auto;touch-action:manipulation;flex:none}
.avbar::before,.avbar::after{pointer-events:none}
.fast button[data-c]{font-size:clamp(14px,4.4vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}

.gofrm{position:sticky;top:0;z-index:46;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:#000;padding:6px 8px;max-width:640px;margin:0 auto;font-size:22px;color:var(--y)}
.gofrm input{font:inherit;font-size:26px;width:3.6em;text-align:center;background:#111;color:var(--y);border:2px solid var(--y);border-radius:6px;min-height:44px;letter-spacing:.15em}
.gofrm button{font:inherit;font-size:22px;min-height:44px;min-width:56px;border:0;border-radius:6px;background:var(--y);color:#000;cursor:pointer}
.gofrm input:focus-visible,.gofrm button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.gomsg{flex-basis:100%;text-align:center;font-size:18px;color:var(--r,#f33);min-height:0}.gomsg:empty{display:none}
/* Texto estático de /p/NNN/ cuando no hay JavaScript */
.screen .static{font-size:22px;line-height:1.3;color:#fff;white-space:normal;padding:8px}
.screen .static h1{color:#ff0;font-size:1.3em;margin:0 0 .5em}.screen .static a{color:#0ff}
.home-ia{max-width:640px;margin:0 auto 4px;text-align:center;font-size:16px;line-height:20px;height:20px;overflow:hidden;color:#aaa}
/* v24: reserva la altura de la pantalla (portada ≈24,5 em) antes de fit() para evitar CLS del teclado */
#screen,.screen{min-height:24.6em}
.pad{min-height:calc(48px * 4 + 60px)}
.screen .static{max-height:24.6em;overflow:auto;box-sizing:border-box}
/* v25: rótulo IA en su propia línea a ancho completo; la pantalla recupera todo el ancho */
#tv{flex-direction:column;align-items:center}
#tv>.home-ia{display:block;flex:none;width:100%;max-width:640px;font-size:13px;line-height:16px;height:16px;margin:0 auto 4px;white-space:nowrap;text-overflow:ellipsis}
#tv>#screen{flex:none;max-width:100%}
#tv>.home-ia{white-space:normal;overflow:hidden}
@media (max-width:600px){#tv>.home-ia{height:32px}}
#screen[data-p]{min-height:24.6em;contain:layout}

/* v28: escritorio con todo al mismo ancho que la pantalla (--tvw lo fija fit()) */
@media (min-width:701px){.gofrm,.fast,.pad{width:calc(var(--tvw,624px) + 16px);max-width:100%;padding-left:8px;padding-right:8px}#tv>.home-ia{max-width:var(--tvw,624px)}.avbar{max-width:calc(var(--tvw,624px) + 16px)}.fast{left:0;right:0;margin:0 auto}}

/* v30: en escritorio (>=701px de ancho y >=500px de alto) la pantalla escala al ANCHO, como en el móvil,
   y ya no se limita por altura; el móvil no cambia. Tope: 96px y ~2 pantallas de alto ((100vh-24)/13.8),
   que es el mismo cálculo del fit(). El escritorio tampoco se re-encoge por la barra de abajo */
@media (min-width:701px) and (min-height:500px){.screen{font-size:clamp(12px,min(calc((100vw - 20px) / 16),calc((100vh - 24px) / 13.8)),96px)}}

/* ===== v30 (móvil, Facebook y Arial) =====
   - Sin desbordamiento lateral, sin zoom por doble toque ni letra inflada por el navegador (Facebook/Android).
   - Pantalla en Arial a todo el ancho (margen mínimo); el tamaño sale del ancho (--sw), igual en CSS y JS.
   - Botones de color + INICIO fijos abajo con fondo negro hasta el borde: la barra AvilesIA se apoya
     sobre ese fondo y no tapa ningún botón ni deja ver el teclado por detrás. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
button,a,input{touch-action:manipulation}
:root{--sw:calc(100vw - 12px)}
@media (min-width:701px) and (min-height:500px){:root{--sw:min(calc(100vw - 40px),calc((100vh - 24px) / 13.8 * 16),1536px)}}
@media (min-width:701px) and (min-height:500px){@supports (height:1dvh){:root{--sw:min(calc(100vw - 40px),calc((100dvh - 24px) / 13.8 * 16),1536px)}}}
@media (min-width:701px) and (max-height:499px){:root{--sw:min(calc(100vw - 40px),760px)}}
#tv{padding:6px max(6px,env(safe-area-inset-left)) 6px max(6px,env(safe-area-inset-right))}
#tv>.home-ia{max-width:var(--sw)}
#tv>#screen,.screen,#screen{width:var(--sw);max-width:100%;min-width:0}
.screen,#screen[data-p]{font-family:Arial,Helvetica,sans-serif;font-size:clamp(13px,calc(var(--sw) / 20.5),75px);line-height:1.25;white-space:pre-wrap;overflow-wrap:anywhere;font-variant-ligatures:normal;overflow:hidden}
.screen .row{height:auto;min-height:1.25em}
.screen .row.bar{padding:0 .2em;margin:.1em 0}
.screen .hdr{display:flex;justify-content:space-between;gap:.4em;white-space:nowrap;overflow:hidden}
.screen .lbl{display:inline-block;min-width:5.6em}
.screen .idx{display:flex!important;align-items:baseline;gap:.15em;white-space:nowrap;overflow:hidden;line-height:1.35}
.screen .idx .tx{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.screen .idx .dt{flex:1 1 .6em;min-width:.6em;border-bottom:.12em dotted currentColor;opacity:.75;transform:translateY(-.25em)}
.screen .idx .nm{flex:none}
.screen .strip{padding:.1em .3em}
.mh-big{font-family:'VT323',monospace;font-weight:normal}
.blk{min-height:0}
/* CLS: reserva la altura solo hasta que se pinta la primera página */
#screen,.screen,#screen[data-p]{min-height:0;contain:none}
#screen:not([data-r]){min-height:26em}
.screen .static{max-height:none}
/* Botones: 4 caben de 320 a 430 px; el fondo negro llega hasta abajo y la barra AvilesIA queda encima de ese fondo */
.fast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));bottom:0;padding-left:max(8px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important;padding-bottom:calc(6px + var(--avh,0px) + env(safe-area-inset-bottom))!important;transition:none}
.fast button{min-width:0;flex:1}
.fast button[data-c]{font-size:clamp(14px,4.8vw,22px)}
body{padding-bottom:calc(var(--fh,140px) + 16px)}
/* Poca altura (móvil en horizontal, teclado abierto): INICIO y colores en una sola fila más baja */
@media (max-height:520px){.fast{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}.b-home{grid-column:auto}.fast button{min-height:40px;font-size:18px}.avbar{font-size:16px;padding:2px 8px}}
/* Escritorio (v28): todo al mismo ancho que la pantalla */
@media (min-width:701px){.gofrm,.fast,.pad{width:calc(var(--tvw,var(--sw)) + 16px)}#tv>.home-ia{max-width:var(--tvw,var(--sw))}.avbar{max-width:calc(var(--tvw,var(--sw)) + 16px)}}
/* v30: en escritorio y en horizontal bajo, Arial algo menor que en móvil (se lee igual que la VT323 de v29) */
@media (min-width:701px){.screen,#screen[data-p]{font-size:clamp(13px,calc(var(--sw) / 24),64px)}}
@media (min-width:701px) and (max-height:499px){.screen,#screen[data-p]{font-size:clamp(13px,calc(var(--sw) / 30),32px)}}

/* ===== v30b (Calidad 17-oct): escritorio (>=701 px) =====
   Ancho de la pantalla = el mayor que deja ver la página ENTERA (29 em con letra = ancho/24) entre IR A PÁGINA
   y los botones + barra AvilesIA, sin pasar del ancho de la ventana. Esta es la estimación previa al JS
   (huecos fijos: 260 px en /p/NNN/, 280 px en la portada con el aviso de IA); deskW() en app.js la afina con
   las medidas reales. Sustituye al escalado de 07c6e6d. Por debajo de 701 px no cambia nada. */
@media (min-width:701px){
 :root{--sw:clamp(min(300px,calc(100vw - 40px)),calc((100vh - 260px) * 24 / 29),min(calc(100vw - 40px),1536px))}
 :root:has(#tv>.home-ia){--sw:clamp(min(300px,calc(100vw - 40px)),calc((100vh - 280px) * 24 / 29),min(calc(100vw - 40px),1536px))}
 .screen,#screen[data-p]{font-size:calc(var(--sw) / 24)}
 /* CLS: la pantalla reserva siempre sus 29 em (P100 y páginas de 23 filas); la 501 ya no empuja el teclado ni el pie */
 #screen,#screen[data-p],#screen:not([data-r]){min-height:29em}
}
@supports (height:1dvh){@media (min-width:701px){
 :root{--sw:clamp(min(300px,calc(100vw - 40px)),calc((100dvh - 260px) * 24 / 29),min(calc(100vw - 40px),1536px))}
 :root:has(#tv>.home-ia){--sw:clamp(min(300px,calc(100vw - 40px)),calc((100dvh - 280px) * 24 / 29),min(calc(100vw - 40px),1536px))}
}}
/* v30b: en escritorio la barra AvilesIA se reserva desde el primer pintado (igual que hace app.js: 58 + 12 px),
   así los botones no saltan al cargar (CLS); y la barra se ve del mismo ancho que los botones */
@media (min-width:701px){:root{--avh:70px}.avbar{max-width:var(--tvw,var(--sw))}}
/* v30b: en escritorio, hasta que app.js pinta la página, la pantalla mide justo 29 em (el texto estático de
   /p/NNN/ no la estira); así el teclado y el pie no saltan al pintar (CLS de la 501) */
@media (min-width:701px){#screen:not([data-r]),#screen[data-p]:not([data-r]){height:29em;max-height:29em;overflow:hidden}}
/* v32: bloque «Parte de AvilesIA» en HTML; en flujo (nunca fijo), sin tapar botones; mismo ancho en escritorio */
.avb .avb-fijo{list-style:none;padding:0;margin:4px 0 8px;columns:1}.avb-fijo li{margin:4px 0;overflow-wrap:anywhere}.avb ul,.avb p{overflow-wrap:anywhere}
@media (max-width:480px){.avb ul{columns:1}}
@media (min-width:701px){.afil,.avb,.foot{width:calc(var(--tvw,var(--sw)) + 16px);max-width:100%;padding-left:8px;padding-right:8px}}