/* ───────────────────────────────────────────────────────────────────────────── Guía del P-Bit v2 (prototipo, 2026-10-12): estilos propios de la guía. Diseño y decisiones: docs/guia-pbit-rediseno-ux.md. Usa los tokens de css/style.css. Va en su propio archivo porque solo lo carga la guía: no pesa en el resto del sitio. ───────────────────────────────────────────────────────────────────────────── */ :root { /* Colores de cada sensor, tomados de la pantalla del firmware */ --s-temp: #ff2fb3; --s-hum: #19d3f0; --s-luz: #ffd21f; --s-son: #ff9a1f; --s-suelo: #4cd964; --s-termo: #ff8a2a; --s-lab: #62f304; --g2-dock-w: 300px; --g2-toc-w: 200px; /* Los fija js/guia-pbit-v2.js con las medidas reales de la cabecera del sitio */ --header-h: 90px; --g2-bar-top: 90px; --g2-bar-h: 44px; --anchor-offset: 114px; /* Borde de chips, baldosas y campos sin seleccionar: 3,6:1 sobre la superficie de las tarjetas (WCAG 1.4.11) */ --line-ui: #64748B; /* Escala tipográfica (tercera mayor; mínimo absoluto 12 px). El H2 de capítulo ya la usa; el resto de tamaños se migra al tocar cada componente */ --fs-display: clamp(36px, 4.5vw, 52px); --fs-h2: clamp(28px, 3vw, 40px); --fs-h3: clamp(22px, 2vw, 28px); --fs-h4: 18px; --fs-lead: 20px; --fs-body: 17px; --fs-small: 14px; --fs-label: 13px; --fs-eyebrow: 12px; /* Espaciado (base 4): 12-16 dentro de un componente, 16 entre párrafos, 24 entre bloques, 48 entre secciones y 96 entre capítulos */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Radios: miniaturas, chips y campos / tarjetas, baldosas y recuadros / dock y hojas / píldoras */ --r-1: 8px; --r-2: 12px; --r-3: 20px; --r-pill: 999px; /* Superficies, líneas y texto */ --surface-1: #0b1220; --surface-2: #131c2f; --surface-hover: #1b2740; --line: rgba(148, 163, 184, 0.14); --line-strong: #334155; --text-1: #ffffff; --text-2: #e2e8f0; --text-3: #94a3b8; /* Papeles del color: lo activo, los enlaces y el foco, la seguridad */ --action: #62f304; --link: #50b1f9; --focus: #50b1f9; --warn: #f59e0b; } @media (min-width: 1440px) { :root { --g2-dock-w: 340px; --g2-toc-w: 216px; } } .g2-dock [hidden] { display: none !important; } /* Enlaces de salto: solo se ven al recibir el foco con el teclado */ .g2-skip { position: absolute; left: 12px; top: -80px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--pbit-green); color: #0b1220; font: 700 14px var(--font-body); text-decoration: none; } .g2-skip:focus { top: 12px; outline: 3px solid var(--pbit-blue); outline-offset: 2px; } .g2-skip + .g2-skip:focus { left: 190px; } .g2-main:focus { outline: none; } /* ── Layout: índice | texto | P-Bit acompañante ─────────────────────────────── Un solo corte del índice, en 1240 px: por encima es un carril a la izquierda; por debajo, una barra bajo la cabecera que abre el mismo