/* El Aleph — v5, armazón y piezas reutilizables (design-handoff/design_handoff_aleph_v5). Fuente: los 6 .dc.html del handoff, fusionados y depurados: - se usa el nombre canónico .b--w (no el .b--l de v5-columna.dc.html, superado por todos los archivos posteriores y por el glosario del README); - .b--d solo aparecía en algunos artboards, se incluye para todos; - las clases de sección del handoff (.sec-v/.sec-t/.sec-g) se mapean aquí a los nombres reales ya definidos en tokens.css (.sec-eval/.sec-arcade/.sec-salas). */ /* [hidden] SIEMPRE gana: cualquier clase de acá que fije su propio `display` (.doors/.tiles con display:grid, etc.) tiene la MISMA especificidad que el [hidden] del user-agent stylesheet -- sin esta regla, la tarjeta/bloque "oculto" via `el.hidden = true` sigue pintándose igual (bug real: las puertas de estado vacío de Participantes se filtraban en un proyecto con participantes porque .doors{display:grid} le ganaba al [hidden] nativo). Los overrides puntuales de abajo (.screen-shell[hidden] etc.) quedan como estaban, redundantes pero inofensivos -- esta regla es la red de seguridad para cualquier clase que aún no tenga su propio override. */ [hidden]{display:none !important} /* ── Riel — 74px, navegación fija de 5 destinos ─────────────────────────── */ .rail{position:sticky;top:0;width:78px;height:100vh;height:100svh;flex:none;background:var(--ink);display:flex;flex-direction:column;align-items:center;padding:15px 0 13px;gap:10px;overflow-y:auto;z-index:25} .rail__nav-group{width:100%;min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(9px,2.2vh,18px)} .rail .nav-item{position:relative;width:52px;height:52px;min-height:52px;padding:0;display:grid;place-items:center;color:var(--slate);border-radius:15px;background:none;border:none;cursor:pointer} .rail .nav-icon{display:grid;place-items:center;width:27px;height:27px} .rail .nav-icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .rail .nav-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .rail .nav-item:hover{color:#fff;background:rgba(255,255,255,.065)} .rail .nav-item--active{color:#fff;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .rail .nav-item--active .nav-icon{color:var(--c-l)} .rail__utilities{display:flex;flex:none;flex-direction:column;align-items:center;gap:10px} /* Selector ES/EN del riel (pedido explícito -- ninguno de los 6 artboards del handoff lo dibuja, sólo los 5 destinos fijos). style/layout.css ya define .babel-language-switcher/.lang-btn para el sidebar viejo, ancho -- acá dentro del riel de 74px los dos botones apilan en vez de ir lado a lado, y toman el mismo lenguaje visual que .nav-item (mayúscula fina, estado activo = fondo translúcido + texto blanco). */ .rail .babel-language-switcher{width:62px;display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0;padding:3px;border-radius:11px;background:rgba(255,255,255,.045)} .rail .babel-language-switcher .lang-btn{min-width:0;background:none;border:none;border-radius:8px;color:var(--slate);font:650 9px var(--s);letter-spacing:.03em;padding:7px 0} .rail .babel-language-switcher .lang-btn:hover{color:#fff;border-color:transparent} .rail .babel-language-switcher .lang-btn.active{color:#fff;background:rgba(255,255,255,.09)} /* ── Armazón riel+columna+trabajo de una pantalla ───────────────────────── El riel ya es global (index.html); esto envuelve el par columna+trabajo que cada template arma dentro de #app. #app es flex-column con align-items:center (layout.css) -- sin width:100%/align-self:stretch acá, el armazón quedaría encogido a su contenido en vez de ocupar el ancho disponible, igual que ya resuelve .content con las mismas propiedades. */ .screen-shell{display:flex;width:100%;align-self:stretch;min-height:100%} .screen-shell[hidden]{display:none} /* Envoltorio transparente al layout para pantallas con más de un `.screen-shell` baked-in (p. ej. try-test.html: selección/resultado) — deja a `.screen-shell` como hijo flex directo de #app, igual que en una pantalla de un solo estado. */ .try-test-page{display:contents} @media (max-width:900px){ .screen-shell{flex-direction:column} .screen-shell>.spine{width:100%;min-height:0} /* Los `.doors` de cada template fijan su propio grid-template-columns inline (p. ej. "1.1fr 1fr 1fr" en Inicio) para el layout de escritorio del handoff — sin esta regla, ese grid no colapsa en pantallas angostas y desborda horizontalmente (confirmado: body.scrollWidth 619px a 320px de viewport). El !important es necesario para ganarle al estilo inline. El tratamiento fino por puerta (p. ej. Inicio: "Probar un test" completa, "Evaluar"/"Entrenar" compactas) es trabajo de la Fase 6 ("pasada móvil") — esto es el piso que evita el desborde mientras tanto. */ .doors{grid-template-columns:1fr !important} } /* ── Columna (spine) — 344px, específica de cada pantalla ───────────────── */ .spine{width:var(--spine);flex:none;background:var(--ink);color:#fff;display:flex;flex-direction:column;min-height:100%} .spine__in{padding:28px 26px 24px;display:flex;flex-direction:column;flex:1;justify-content:space-between;gap:24px} @media (min-width:901px){ .screen-shell>.spine{position:sticky;top:0;align-self:flex-start;height:100vh;height:100svh;min-height:0;overflow-y:auto;overscroll-behavior:contain} .screen-shell>.spine>.spine__in{min-height:100%} } .crumb{font:600 11px var(--s);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:0 0 12px} .crumb a{color:var(--c-l)} /* El markup real usa