/* ============================================================================ Rollplanner — Design tokens ---------------------------------------------------------------------------- Fuente única de verdad para color, tipografía y espaciado. La auditoría de agosto 2026 midió 68 hex distintos, 35 tamaños de fuente y ~10 alphas de texto: cada página había inventado su propia versión del sistema. Las páginas migran progresivamente a estas variables; el CSS nuevo DEBE usarlas. Regla de color semántico: - El rojo es marca y acción primaria. Nada más. - Verde = éxito, ámbar = aviso. Solo estados. - El dorado --rp-coach marca el dominio coach/equipo (invitaciones, compartir con alumnos) y no se usa fuera de él. - --rp-studio es el neutro claro del tier STUDIO: solo badges y paywalls de ese tier. - Los colores de tipo de nodo viven en el editor y en leyendas, y NO se reutilizan como decoración fuera de ellos. El color de nodo va en el borde y el icono, nunca en el relleno. Regla anti-congelación (theming por cinturón): --theme-color se asigna en runtime con style.setProperty sobre body, .menu-wrapper, #contentFrame o el hub de cada página — nunca sobre :root. Un token derivado de --theme-color definido AQUÍ se computaría en :root con el fallback rojo y se heredaría ya resuelto: el cambio de tema no lo re-teñiría. Por eso las derivaciones de acento se escriben SIEMPRE en el punto de uso: color-mix(in srgb, var(--theme-color, #b33131) N%, transparent) Porcentajes canónicos: 45% borde marcador · 50% glow · 5% tinte de superficie · 18% tinte de estado activo. Regla de puentes: Los alias locales de cada página (--red-accent, --text-primary, --text-secondary…) no definen valores propios: apuntan a estos tokens. ========================================================================== */ /* ---- Navegación entre páginas ---------------------------------------------- La plataforma es multipágina (menu.html ↔ /mibjj ↔ /editor ↔ login…) y cada salto es una carga de documento completa. Dos medidas para que no se vea: 1. El html se pinta oscuro desde el primer frame: sin esto, el primer paint de la página nueva es el blanco del user-agent (p. ej. menu.html arranca con body{opacity:0} esperando la sesión, y lo que se veía era ese blanco). 2. View Transitions cross-document: en Chrome/Edge/WebView (Capacitor) el navegador hace un crossfade entre la página vieja y la nueva. Ambos documentos deben declarar el opt-in; este fichero lo linkan todas las páginas top-level salvo index.html (app shell), que lleva copia inline. */ html { background-color: #1a1a1e; } @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } :root { /* ---- Marca ---- */ --rp-red: #b33131; /* acción primaria, acento de marca */ --rp-red-hover: #c93939; --rp-red-glow: rgba(179, 49, 49, 0.35); /* ---- Neutros (fondo → superficie → bordes) ---- */ --rp-bg: #1a1a1e; /* fondo base app/landing */ --rp-bg-panel: #161618; /* superficie sólida de sidebar/menú */ --rp-bg-deep: #0a0a0c; /* fondos de email/overlays profundos */ --rp-surface: rgba(255, 255, 255, 0.03); --rp-surface-2: rgba(255, 255, 255, 0.06); --rp-border: rgba(255, 255, 255, 0.08); --rp-border-strong: rgba(255, 255, 255, 0.18); /* ---- Texto: SOLO estos tres niveles ---- El terciario (0.55) es el mínimo que pasa WCAG AA sobre --rp-bg; no usar alphas menores para texto legible. Para texto decorativo (watermarks) usar --rp-text-ghost. */ --rp-text: #ffffff; --rp-text-2: rgba(255, 255, 255, 0.72); --rp-text-3: rgba(255, 255, 255, 0.55); --rp-text-ghost: rgba(255, 255, 255, 0.08); /* watermarks/outline deco */ /* ---- Estados ---- */ --rp-success: #22c55e; --rp-warning: #e6a817; /* ---- Dominio coach/equipo ---- */ --rp-coach: #d4a04b; --rp-coach-dim: rgba(212, 160, 75, 0.5); /* ---- Tier STUDIO ---- Neutro claro a propósito: el rojo es marca, el dorado es coach, y el cinturón manda en el acento. STUDIO se distingue por contraste, no por un tono nuevo que competiría con los tres anteriores. */ --rp-studio: #f0f0f2; --rp-studio-dim: rgba(240, 240, 242, 0.45); /* ---- Colores de tipo de nodo (solo editor y leyendas) ---- La fuente de verdad es la tabla node_types de Supabase (supabase/prd-bootstrap/02-catalog-and-gamification.sql); estos valores son copia de ella y se corrigen ahí primero. */ --rp-node-guard: #2fdb96; --rp-node-transition: #7C3AED; --rp-node-submission: #eca234; --rp-node-position: #f7c933; --rp-node-event: #3B82F6; --rp-node-plan: #dc2626; --rp-node-projection: #A0826D; /* ---- Tipografía: el sistema (26-09-2026, sistema-tipografico-2026-09-26.md) ---- Dos familias, cuatro roles. La regla que lo resume: MAYÚSCULAS ⇒ CONDENSADA, salvo los títulos (≥18px, Poppins itálica 900) y la marca. 1. TÍTULO Poppins itálica 900, mayúsculas, tracking negativo (display/xl/lg). 2. ACCIÓN Barlow Condensed itálica 700, mayúsculas: 18/16/14, tracking 1/0.8. Todo botón, CTA y enlace-botón. Nunca en Poppins. 3. ETIQUETA Barlow Condensed recta 600, mayúsculas: 15 (eyebrow, label de Y CONTROL campo, tab, nav) / 13 (chip, badge, th, tag). Texto gris, nunca en color de acento, sin marcador. Tab, segmento, chip, filtro y toggle son controles: misma receta que la etiqueta. 4. CUERPO Poppins recta 400/500/600, caja normal: 15/13/11. Números y KPI: Poppins itálica 900 tabular. Itálica = acción o título. Recta = etiqueta, control o cuerpo. La condensada nunca va en cuerpo, títulos ni campos de texto. El acento no es color de texto: vive en el hexágono, el titular de contorno y el botón relleno. Fuera del sistema a propósito: las piezas del canvas (18px Poppins 700) y las marcas de agua. */ /* ---- Tipografía: escala de 6 pasos ---- */ --rp-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Etiquetas (26-09-2026, Jose eligió la opción 5 de eyebrow-estilos-propuesta): una condensada deportiva SOLO para eyebrows, kickers, labels de campo, cabeceras de tabla y metadatos en mayúsculas. Nunca para cuerpo ni títulos. Al ser estrecha se lee a 15px ocupando lo que Poppins a 10px, y no necesita tracking ancho: la receta «10px · 800 · 3px · color de acento» queda retirada de toda la plataforma. El color va al punto encendido, no al texto. */ --rp-font-label: 'Barlow Condensed', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rp-fs-label: 15px; /* eyebrow / kicker / label de campo */ --rp-fs-label-sm: 13px; /* tags dentro de tarjetas, cabeceras de tabla, chips */ --rp-fs-btn-sm: 14px; /* botones pequeños (condensada itálica 700) */ --rp-fs-btn: 16px; /* botón base y CTA */ --rp-fs-btn-lg: 18px; /* CTA grande */ --rp-fs-xs: 11px; /* metadatos, badges */ --rp-fs-sm: 13px; /* cuerpo secundario, botones */ --rp-fs-md: 15px; /* cuerpo */ --rp-fs-lg: 18px; /* títulos de card/modal */ --rp-fs-xl: 28px; /* títulos de sección */ --rp-fs-display: clamp(36px, 5vw, 64px); /* display hero */ /* ---- Letter-spacing por rol ---- Botones y etiquetas van en la condensada (--rp-font-label): los botones en itálica 700 (misma voz de la CTA de siempre) y tracking corto, porque la condensada no necesita aire. El tracking ancho ya no existe en la casa: no es de los botones: con más de ~1.5px la itálica se descompone y los strings largos de ES/PT truncan en móvil. Los títulos comprimen en negativo. Las etiquetas van en la condensada (--rp-font-label) y por eso su tracking es corto: 0.6px. */ --rp-ls-display: -1px; --rp-ls-title: -0.5px; --rp-ls-btn: 1px; --rp-ls-btn-sm: 0.8px; --rp-ls-eyebrow: 0.6px; /* ---- Espaciado: escala de 8px ---- */ --rp-sp-1: 4px; --rp-sp-2: 8px; --rp-sp-3: 16px; --rp-sp-4: 24px; --rp-sp-5: 40px; --rp-sp-6: 64px; --rp-sp-7: 96px; /* separación máxima entre secciones de landing */ /* ---- Identidad ---- */ --rp-radius: 0; /* rectas en superficies: es la seña de identidad, no cambiar */ --rp-radius-sm: 6px; /* chips, campos, celdas y avatares (Jose, 26-09-2026) */ --rp-blur: 20px; /* backdrop-filter estándar (14px en móvil) */ /* ---- La casa (26-09-2026): lo que fijó la ficha isla del editor ---- Sin bordes: una superficie se separa por sombra y por LUZ del color del bloque (ver .rp-isle en components.css). Donde iba un border-left va un punto encendido de 6 px. Corte diagonal en lo grande, radio de 6 px en lo pequeño. Dos curvas: la del sistema para desplazamientos y el rebote corto para los «sellos» (números, chips, hexágonos que se encienden). */ --brut-ease: cubic-bezier(0.16, 1, 0.3, 1); --rp-ease: var(--brut-ease); --rp-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --rp-cut: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); --rp-cut-btn: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); --rp-cut-sm: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); --rp-error: #ff6b6b; /* El hexágono de la pieza del canvas, con sus esquinas suaves, como máscara: el mismo path que dibujan el editor y el hero de la landing. */ --rp-hex: url("data:image/svg+xml;utf8,"); /* ---- Textura: rejilla de puntos ---- Primera capa de una lista background:. 26px sobre paneles/modales, 28px sobre páginas completas (calibración histórica de menu.html). */ --rp-dot-grid: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 26px 26px; --rp-dot-grid-page: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px; } @media (max-width: 768px) { :root { --rp-blur: 14px; } } /* ---- Foco visible --------------------------------------------------------- Base de accesibilidad para todo el producto: quien navega con teclado tiene que ver dónde está. La app arrastra 59 `outline: none` repartidos por las páginas, escritos para que el clic de ratón no dejara marco; por eso esta regla lleva !important, que es lo único que los tapa sin editarlos uno a uno. `:focus-visible` no se activa con el ratón, así que aquellos siguen cumpliendo su función original. El anillo se tiñe con el cinturón: la derivación va aquí, en el punto de uso, nunca en :root (regla anti-congelación de arriba). Sin border-radius propio: el outline hereda el del elemento, y la identidad es --rp-radius: 0. */ :focus-visible { outline: 2px solid color-mix(in srgb, var(--theme-color, #b33131) 55%, #ffffff) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: no-preference) { :focus-visible { transition: outline-color 0.15s ease; } } /* Los campos de texto de la casa (26-09-2026) no llevan caja: su foco visible es la línea del color que se dibuja debajo (rp-field, rp-field--line y las recetas locales). Chrome hace coincidir :focus-visible en todo campo de texto aunque el foco venga del ratón o de un focus() programático, y el anillo tapaba la línea. Casillas, radios y rangos conservan el anillo. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus-visible, textarea:focus-visible, select:focus-visible { outline: none !important; }