/* ============================================================================ ayuda.css — la piel de las páginas de ayuda (app.sceno.cc/ayuda/) ---------------------------------------------------------------------------- FUENTE. `scripts/ayuda-build.mjs` la copia tal cual a public/ayuda/ayuda.css; no se edita la copia. Tokens COPIADOS a mano (no se importa src/styles/tokens.css): la ayuda tiene que verse bien sola, sin nada de la app cargado, y con una sola petición de hoja. Mismos nombres y mismos valores que la app y que la landing — si algún día cambia el naranja, cambia en los tres sitios. TEMA: claro y oscuro. El oscuro entra por dos vías y las dos hacen falta: `[data-theme="dark"]`, que es lo que pone `/theme-boot.js` leyendo la misma clave que el interruptor de la APP (así la ayuda abre en el tema que el usuario eligió dentro de Sceno), y `prefers-color-scheme` como respaldo para cuando no hay nada guardado o el JS no corre. El `` sale SIN `data-theme` a propósito (al contrario que el index.html de la app): con el atributo puesto de fábrica, `:root:not([data-theme])` no casaba nunca y el respaldo del sistema no servía para nada — un visitante con Windows en oscuro y sin nada guardado se comía la página en blanco. Piel «Footnotes»: rectas, radios 0, plano, jerarquía por opacidad y el color funcional como LÍNEA. ============================================================================ */ @font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/HankenGrotesk-VF.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:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/HankenGrotesk-VF-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/DMMono-400.woff2') format('woff2'); } :root{ --bg:#EDEBE5;--surface:#FFFFFF;--surface-2:#F4F2EC;--ink:#1A1B1D;--ink-2:#5C5E63; --line:rgba(20,20,28,.09);--line-2:rgba(20,20,28,.16); --accent:#E8552E;--accent-ink:#C8431F; --fd:'Hanken Grotesk',system-ui,sans-serif;--fm:'DM Mono',ui-monospace,monospace; color-scheme:light; } /* El naranja de marca sobre fondo oscuro pierde contraste: en oscuro los enlaces usan un tono más claro (--accent-ink), que es el que tiene que leerse, y el --accent se reserva para líneas y rellenos, donde el contraste de texto no aplica. */ :root[data-theme="dark"]{ --bg:#141518;--surface:#1B1C20;--surface-2:#22242A;--ink:#ECEBE8;--ink-2:#A2A5AD; --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.20); --accent:#E8552E;--accent-ink:#FF8C6B; color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#141518;--surface:#1B1C20;--surface-2:#22242A;--ink:#ECEBE8;--ink-2:#A2A5AD; --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.20); --accent:#E8552E;--accent-ink:#FF8C6B; color-scheme:dark; } } *{box-sizing:border-box} body{ margin:0;background:var(--bg);color:var(--ink); font:400 17px/1.6 var(--fd);-webkit-font-smoothing:antialiased; } :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ── Cabecera ───────────────────────────────────────────────────────────── */ .a-top{ display:flex;align-items:center;gap:14px; padding:0 24px;height:56px; border-bottom:1px solid var(--line);background:var(--surface); position:sticky;top:0;z-index:3; } .a-marca{display:flex;align-items:center;gap:10px;margin-right:auto;font-weight:600;color:var(--ink);text-decoration:none} .a-marca img{display:block} .a-tema{ font:500 12px var(--fm);letter-spacing:.06em;text-transform:uppercase; background:none;border:1px solid var(--line-2);color:var(--ink-2); padding:6px 10px;cursor:pointer; } .a-tema:hover{border-color:var(--accent);color:var(--accent-ink)} .a-tema:empty{display:none} /* sin JS no hay interruptor que ofrecer: manda el tema del sistema */ .a-volver{font-size:15px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} .a-volver:hover{text-decoration-thickness:2px} /* ── El armazón de dos columnas ─────────────────────────────────────────── */ .a-lay{ display:grid;grid-template-columns:248px minmax(0,1fr); gap:40px;max-width:1160px;margin:0 auto;padding:0 24px; align-items:start; } .a-col{min-width:0} /* ── Menú lateral tipo wiki ─────────────────────────────────────────────── */ /* Es un
para que en móvil se plegue sin JS (y para que en escritorio se pueda plegar si estorba). El triángulo de fábrica se quita y se dibuja uno propio: el nativo no se puede colocar ni colorear. El triángulo propio va con BORDES y no con el carácter «▾»: Hanken Grotesk no trae ese glifo, así que caía a la fuente del sistema y salía como un guion suelto delante de cada sección (visto en la primera pasada). Un triángulo de bordes se pinta igual en cualquier máquina. */ .a-nav{position:sticky;top:80px;padding:28px 0 0;font-size:15px} .a-nav > summary,.a-nav-sec > summary{ list-style:none;cursor:pointer; } .a-nav > summary::-webkit-details-marker,.a-nav-sec > summary::-webkit-details-marker{display:none} .a-nav-tit{ font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase; color:var(--ink-2);padding:0 0 10px;display:flex;align-items:center;gap:8px; } .a-nav-tit::before,.a-nav-sec > summary::before{ content:'';flex:none;align-self:center; width:0;height:0;margin-right:1px; border:4px solid transparent;border-top-color:currentColor;border-bottom:0; transition:transform .15s; } .a-nav:not([open]) .a-nav-tit::before{transform:rotate(-90deg)} .a-nav-in{border-top:1px solid var(--line)} .a-nav-top{ display:block;padding:11px 2px;color:var(--ink);text-decoration:none; border-bottom:1px solid var(--line);font-weight:500; } .a-nav-top:hover{color:var(--accent-ink)} .a-nav-sec{border-bottom:1px solid var(--line)} .a-nav-sec > summary{ display:flex;align-items:baseline;gap:8px; padding:11px 2px;font-weight:500;color:var(--ink);line-height:1.35; } /* El título y su chip, en un solo bloque que envuelve: así el «Beta» viaja con la última palabra en vez de quedarse flotando a la derecha cuando el nombre ocupa dos líneas. */ .a-nav-sec > summary > span:not(.a-beta){min-width:0} .a-nav-sec > summary::before{color:var(--ink-2)} .a-nav-sec:not([open]) > summary::before{transform:rotate(-90deg)} .a-nav-sec > summary:hover{color:var(--accent-ink)} .a-nav-sec ul{list-style:none;margin:0 0 10px;padding:0 0 0 18px} .a-nav-sec li{margin:0} .a-nav-sec li a{ display:block;padding:7px 0 7px 10px; color:var(--ink-2);text-decoration:none;line-height:1.35;font-size:14.5px; border-left:2px solid var(--line); } .a-nav-sec li a:hover{color:var(--accent-ink);border-left-color:var(--line-2)} /* Dónde estoy: filete naranja y tinta plena. El único sitio del menú con color de relleno es ninguno — la marca es la LÍNEA (norma 3 de composición). */ .a-nav-sec li a[aria-current="page"],.a-nav-top[aria-current="page"]{ color:var(--ink);font-weight:600; } .a-nav-sec li a[aria-current="page"]{border-left-color:var(--accent)} .a-nav-top[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px} /* ── Columna de lectura ─────────────────────────────────────────────────── */ .a-main{max-width:74ch;padding:36px 0 0} .a-migas{font:400 13px var(--fm);color:var(--ink-2);margin-bottom:22px;letter-spacing:.02em} .a-migas a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px} .a-migas a:hover{color:var(--accent-ink)} h1{font:700 clamp(27px,4vw,36px)/1.15 var(--fd);letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance} h2{font:600 22px/1.3 var(--fd);letter-spacing:-.015em;margin:42px 0 12px;padding-top:16px;border-top:1px solid var(--line)} h3{font:600 18px/1.35 var(--fd);margin:28px 0 8px} p{margin:0 0 16px} strong{font-weight:600;color:var(--ink)} code{font:400 .92em var(--fm);background:var(--surface-2);border:1px solid var(--line);padding:1px 5px} /* LOS ENLACES DEL CUERPO VAN EN COLOR, no solo subrayados. Antes eran tinta + filete naranja, y al lado de una —tinta + negrita— no había forma de saber cuál de las dos se podía pulsar: el dueño lo dijo con esas palabras. El color los separa de la negrita de un vistazo, y el subrayado los separa para quien no distingue el color. */ .a-main p a,.a-main li a,.a-pie a,blockquote a{ color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px; } .a-main p a:hover,.a-main li a:hover,.a-pie a:hover,blockquote a:hover{text-decoration-thickness:3px} ol,ul{margin:0 0 16px;padding-left:24px} li{margin:0 0 8px} blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:2px solid var(--accent);color:var(--ink-2)} /* ── «Beta» ─────────────────────────────────────────────────────────────── */ /* Todos los programas están en beta (2026-09-12). Chip de LÍNEA, no relleno de color. */ .a-beta{ display:inline-block;vertical-align:middle; font:500 10px var(--fm);letter-spacing:.12em;text-transform:uppercase; color:var(--accent-ink);border:1px solid var(--accent); padding:2px 6px;margin-left:6px;line-height:1.4; position:relative;top:-2px; } .a-nav-sec > summary .a-beta{top:0;margin-left:2px} /* ── La lista de preguntas (portada y portada de sección) ───────────────── */ /* Filas unidas, no tarjetas: un nivel por página (DISENO-COMPOSICION). Llevan «›» delante para que se vea que cada fila LLEVA a algún sitio; sin él parecían una lista de temas y nada más. */ .a-preg{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--line)} .a-preg li{margin:0;border-bottom:1px solid var(--line)} /* `.a-main li a` (el color de los enlaces del cuerpo) gana por especificidad: estas reglas llevan `.a-main` delante o la lista sale toda naranja y subrayada, que en una lista de veinte filas es ruido en vez de señal. Aquí la fila entera ES el enlace, así que basta el «›» y el hover. */ .a-main .a-preg a{ display:flex;gap:10px;padding:13px 2px; color:var(--ink);text-decoration:none;font-weight:500; } .a-main .a-preg a::before{content:'›';color:var(--accent);font-weight:600} .a-main .a-preg a:hover{color:var(--accent-ink)} /* ── Descargas ──────────────────────────────────────────────────────────── */ .a-dl{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px} .a-btn{ display:inline-flex;align-items:center;padding:12px 20px; border:1px solid var(--ink);font:600 15px var(--fd);color:var(--ink); text-decoration:none;line-height:1.2; } .a-btn:first-child{background:var(--accent);border-color:var(--accent);color:#fff} .a-btn:first-child:hover{background:color-mix(in srgb,var(--accent) 88%,#000);border-color:color-mix(in srgb,var(--accent) 88%,#000);color:#fff} .a-btn:hover{border-color:var(--accent);color:var(--accent-ink)} /* ── Esquemas (SVG en línea) ────────────────────────────────────────────── */ .a-fig{margin:0 0 28px;padding:20px;background:var(--surface);border:1px solid var(--line);overflow-x:auto} .a-fig svg{display:block;width:100%;min-width:560px;height:auto} .d-box{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1} .d-box-main{fill:var(--surface-2)} .d-accent{stroke:var(--accent);stroke-width:2} .d-line{stroke:var(--line-2);stroke-width:1} .d-head{fill:var(--ink-2)} .d-t{font:500 14px var(--fd);fill:var(--ink)} .d-t-main{font:600 18px var(--fd)} .d-t-sm{font-size:12.5px} .d-t-dim{fill:var(--ink-2);font-weight:400} /* ── Pie ────────────────────────────────────────────────────────────────── */ .a-pie{ margin:64px 0 0;padding:22px 0 40px; border-top:1px solid var(--line);color:var(--ink-2);font-size:15px; } .a-pie p{margin:6px 0} /* ── Estrecho ───────────────────────────────────────────────────────────── */ @media (max-width:900px){ .a-lay{grid-template-columns:minmax(0,1fr);gap:0;padding:0 18px} /* El menú deja de ser una columna y pasa a ser un desplegable arriba, plegado por `ayuda.js`. */ .a-nav{position:static;padding:18px 0 0;border-bottom:1px solid var(--line)} .a-nav[open]{padding-bottom:14px} .a-main{padding-top:26px} } @media (max-width:640px){ body{font-size:16px} .a-top{padding:0 18px;gap:10px} .a-marca{font-size:15px} .a-dl .a-btn{flex:1 1 100%;justify-content:center} }