/* Identidad pública de Pixelbook. Misma paleta, rejilla y botones que la portada. */
:root { color-scheme: dark; --fondo:#0b0816; --panel:#171130; --tinta:#f1edff; --tenue:#b9b0dc; --amarillo:#ffe45f; --cian:#7fd9ff; --morado:#3c2180; --morado-oscuro:#6134b4; --suave:#211a3b; --borde:#3a2d6e; --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-padding-top:1rem; }
body { margin:0; max-width:none; padding:0; min-height:100vh; color:var(--tinta); font:17px/1.65 system-ui,-apple-system,'Segoe UI',sans-serif; overflow-wrap:break-word; background-color:var(--fondo); background-image:linear-gradient(#171127 2px,transparent 2px),linear-gradient(90deg,#171127 2px,transparent 2px); background-size:48px 48px; }
[hidden] { display:none !important; }
.pb-cabecera { max-width:none; margin:0; padding:0; border-bottom:3px solid #322950; background:var(--fondo); }
.pb-barra { width:min(1120px,100% - 32px); margin:auto; padding:14px 0; display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; }
.pb-marca { display:flex; align-items:center; gap:10px; padding:4px; border:3px solid transparent; border-radius:6px; flex:none; text-decoration:none; }
.pb-marca img { display:block; width:auto; height:29px; image-rendering:pixelated; }
.pb-marca img.pb-icono { width:40px; height:40px; image-rendering:auto; }
.pb-marca:hover { border-color:#fff; background:var(--panel); transform:translateY(-2px); }
.pb-barra nav { display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-right:auto; }
.pb-barra nav a { padding:9px 0 6px; border-bottom:3px solid transparent; text-decoration:none; color:var(--tinta); font:700 13px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.03em; }
.pb-barra nav a:hover, .pb-barra nav a[aria-current=page] { color:var(--amarillo); border-bottom-color:var(--amarillo); background:none; }
main { width:min(900px,100% - 32px); margin:36px auto 64px; padding:30px clamp(18px,4vw,44px) 40px; background:var(--panel); border:3px solid var(--borde); border-radius:6px; box-shadow:8px 8px 0 #000; }
h1,h2,h3,h4 { font-family:var(--mono); line-height:1.25; text-wrap:balance; }
h1 { margin:0 0 24px; font-size:clamp(26px,3.5vw,40px); color:var(--amarillo); text-shadow:3px 3px #000; }
h2 { margin:2.2rem 0 .8rem; padding-top:1.3rem; border-top:2px solid var(--borde); color:var(--amarillo); font-size:clamp(21px,2.4vw,27px); }
h3 { margin:1.6rem 0 .5rem; font-size:21px; color:#fff; }
h4 { font-size:17px; margin:1.2rem 0 .3rem; }
p { margin:0 0 1.1em; }
li { margin:.4em 0; }
li::marker { color:var(--amarillo); }
strong { color:#fff; }
a { color:var(--cian); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
a:hover { color:var(--amarillo); background:#2b2148; text-decoration-thickness:3px; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,audio:focus-visible { outline:3px solid var(--amarillo); outline-offset:4px; }
button,a.boton { display:inline-block; min-height:44px; padding:.7em 1em; margin:.3em .25em .3em 0; border:3px solid #000; border-radius:6px; background:var(--morado); color:#fff; box-shadow:0 4px 0 #000; font:800 15px/1.4 var(--mono); text-decoration:none; cursor:pointer; }
button:hover,a.boton:hover { background:var(--morado-oscuro); color:#fff; border-color:#fff; transform:translateY(-2px); box-shadow:0 6px 0 #000; }
button:active,a.boton:active { transform:translateY(2px); box-shadow:0 2px 0 #000; }
a.pb-jugar { width:auto; background:#1f834c; white-space:nowrap; }
a.pb-jugar:hover { background:#3bb460; }
button:disabled,button:disabled:hover { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
input,textarea,select { max-width:100%; color:var(--tinta); background:var(--fondo); border:2px solid var(--borde); border-radius:4px; font:inherit; padding:.6rem .75rem; }
input:hover,textarea:hover,select:hover { border-color:var(--cian); }
label { font-weight:600; }
code,pre { font-family:var(--mono); font-size:.9em; }
code { background:var(--suave); color:#d8d1ff; padding:.1em .3em; border-radius:3px; overflow-wrap:anywhere; }
pre { background:var(--fondo); padding:1rem; border:2px solid var(--borde); overflow:auto; }
pre code { background:none; padding:0; overflow-wrap:normal; }
table { border-collapse:collapse; display:block; overflow-x:auto; margin:1rem 0; }
th,td { border:1px solid var(--borde); padding:.45rem .65rem; text-align:left; vertical-align:top; }
th { color:var(--amarillo); }
blockquote,.frase { margin:1.2rem 0; padding:1rem 1.2rem; border:2px solid var(--borde); border-left:4px solid var(--cian); border-radius:4px; background:var(--fondo); }
blockquote p:last-child { margin-bottom:0; }
blockquote.provisional,.aviso { padding:.85rem 1rem; background:#332b16; color:#fff0b0; border:2px solid #a89042; border-radius:4px; }
.frase label { display:block; margin-bottom:.4rem; }
.frase input { width:100%; }
.frase .texto { margin:1rem 0; padding:1rem; background:var(--suave); border-left:4px solid var(--amarillo); }
.pequeno,.small,.pista,footer { font-size:.9rem; color:var(--tenue); }
footer { margin-top:3rem; padding-top:1rem; border-top:2px solid var(--borde); }
.v { padding:1rem; margin:.8rem 0; background:var(--fondo); border:2px solid var(--borde); border-radius:4px; }
.v.off { border-style:dashed; }
.v .m,.v .n { color:var(--tenue); font-size:.9em; }
.v .tag { display:inline-block; background:var(--suave); padding:.1em .4em; }
audio { width:100%; margin-top:.7rem; }
.pb-saltar { position:absolute; left:16px; top:-120px; z-index:10; padding:10px; background:var(--amarillo); color:var(--fondo); }
.pb-saltar:focus { top:10px; }
@media(max-width:600px) { .pb-barra { gap:10px 14px; } .pb-marca img { height:23px; } .pb-marca img.pb-icono { width:32px; height:32px; } .pb-barra nav { order:3; width:100%; } .pb-barra .pb-jugar { margin-left:auto; font-size:13px; } main { margin-top:22px; padding:24px 16px 30px; box-shadow:5px 5px #000; } button,a.boton { max-width:100%; } }

/* La videoteca conserva su reproductor y sus controles de calidad y capítulos. */
body > header:not(.pb-cabecera) { width:min(900px,100% - 32px); margin:30px auto 0; }
article { border-radius:6px; }
.chapters button,.quality button { border-radius:4px; border-width:2px; }
.chapters button:hover,.quality button:hover { background:var(--morado-oscuro); color:#fff; border-color:#fff; transform:translateY(-2px); }
.row a:hover { color:var(--amarillo); }
summary:focus-visible { outline:3px solid var(--amarillo); outline-offset:4px; }

/* El editor agrupa sus pasos en paneles, sin un segundo marco exterior. */
main.pb-editor { width:min(960px,100% - 32px); padding:28px 0 64px; background:transparent; border:0; box-shadow:none; }
main.pb-editor h2 { margin:0 0 16px; padding:0; border:0; }

@media(max-width:600px) { main.pb-editor button,main.pb-editor a.boton { margin-right:0; } }