/* ============================================================================ TOKENS · codrex ============================================================================ ARCHIVO GENERADO. NO SE EDITA A MANO: lo que se escriba aquí se pierde en la siguiente generación. Sale de juntar: _fuente/esqueleto.css _fuente/paleta-funcional.css _fuente/marcas/codrex.css Para cambiar un color de esta marca, se edita su archivo de marca. Para cambiar un radio, un aire o una sombra, se edita el esqueleto, y entonces cambia para TODAS las marcas a la vez, que es de lo que se trata. Se regenera con `generar-tokens.py`. ============================================================================ */ /* ============================================================================ ESQUELETO · común a TODAS las marcas ============================================================================ Aire, grosores, radios, sombras, movimiento, interlineado, capas, transparencias y el ancho del menú. Ni un color de marca. Una marca NO puede cambiar nada de aquí. Si una necesita otro radio u otro aire, es que el sistema se queda corto y se cambia AQUÍ, para todas: es lo que evita que cada cliente acabe con un sistema propio. NO SE EDITA A MANO. Sale de partir `tokens.css`. ============================================================================ */ :root{ /* ============ ESCALA DE ESPACIADO ============ El aire entre las cosas: el relleno de un botón, la separación entre dos tarjetas, el margen bajo un título. Hasta el 2026-08-09 iba escrito a mano en cada regla: 719 medidas sueltas repartidas por los tableros. Con eso, "dale un poco más de aire a las tarjetas" obligaba a buscar y cambiar decenas de sitios, y siempre quedaba alguno fuera. Los valores son EXACTAMENTE los que ya se usaban, para que al pasar todo al sistema no se mueva ni un píxel. Consolidar la escala (quitar los intermedios) es un paso posterior y una decisión del CEO, porque eso sí cambia cómo se ve. */ --sp-0:1px; --sp-1:2px; --sp-2:3px; --sp-3:4px; --sp-4:5px; --sp-5:6px; --sp-6:7px; --sp-7:8px; --sp-8:9px; --sp-9:10px; --sp-10:11px; --sp-11:12px; --sp-11b:13px; --sp-12:14px; --sp-12b:15px; --sp-13:16px; --sp-13b:17px; --sp-14:18px; --sp-15:20px; --sp-16:22px; --sp-16b:24px; --sp-17:26px; --sp-17b:28px; --sp-18:30px; --sp-18b:32px; --sp-14b:19px; --sp-19:34px; --sp-19b:36px; --sp-19c:38px; --sp-20:40px; --sp-21:44px; --sp-22:56px; --sp-23:80px; /* ============ ZONA QUE SE TOCA CON EL DEDO ============ 44 es el mínimo de las guías de accesibilidad, y coincide con lo que miden las dos plataformas móviles. El compacto, 36, es para filas densas dentro de una tabla, donde 44 partiría la fila: se usa a propósito, no por comodidad de quien escribe la regla. Van por INTENCIÓN y no por valor (`--tap-min`, no `--alto-44`): el día que el mínimo cambie, cambia aquí y no en cuarenta sitios. Vivían solo dentro del archivo generado `tokens.css`, escritas a mano encima de la salida del programa. Como el generador compara lo que va a escribir contra ese archivo, las echaba de menos en TODAS las marcas y se negaba a escribir ninguna: el sistema entero quedaba bloqueado por dos medidas que ni siquiera son color. Aquí es donde les toca vivir, porque son medida y valen igual para toda marca. */ --tap-min:44px; --tap-compacto:36px; --tap-icono:44px; /* Alto común de los controles de la barra de arriba (buscador, tamaño de letra, idioma y tema) y alto de la barra pegada que deja cada pieza al medirse. Vivían solo en `tokens.css`, escritos a mano, así que el generador las echaba de menos en todas las demás marcas y no escribía ninguna (medido el 2026-09-28 al abrir la marca de Producción audiovisual). Los valores son los que ya se usaban: 38 px, y 0 hasta que la pieza mida su barra. */ --alto-control:38px; --alto-pegado:0px; /* ============ GROSOR DE LETRA ============ Cuatro pesos y ni uno más. Estaban los 265 usos escritos a número pelado. */ --w-normal:400; --w-medio:500; --w-fuerte:600; --w-max:700; /* ============ MOVIMIENTO ============ Cuánto tarda una cosa en cambiar cuando la tocas. Había once duraciones distintas escritas a mano (.12, .13, .14, .15, .16, .18, .2, .25, .26, .3, .32...), que a esa escala nadie distingue: es escribir a ojo. Tres velocidades y ya. */ --mov-rapido:.15s; /* un color que cambia al pasar por encima */ --mov-medio:.25s; /* algo que se despliega o se pliega */ --mov-lento:.32s; /* el menú al contraerse, una ventana al abrirse */ /* La curva: cómo arranca y cómo frena. La de la casa entra rápido y frena suave. */ --ease:cubic-bezier(.16,1,.3,1); --ease-suave:ease-in-out; /* ============ INTERLINEADO ============ (el aire entre renglones) Cuanto más grande es la letra, menos aire necesita entre líneas. */ --lh-titulo:1.1; --lh-subtitulo:1.25; --lh-normal:1.5; --lh-lectura:1.6; --lh-pegado:1; /* ============ ESPACIADO ENTRE LETRAS ============ En negativo aprieta (los títulos grandes); en positivo abre (los rótulos en mayúsculas). */ --ls-titulo:-.02em; --ls-medio:-.01em; --ls-normal:0; --ls-rotulo:.05em; --ls-rotulo-ancho:.09em; /* ============ TRANSPARENCIA ============ */ --op-nada:0; --op-tenue:.4; --op-medio:.55; --op-casi:.72; --op-alto:.9; --op-total:1; /* ============ CAPAS ============ (qué se pinta encima de qué) Estaban repartidas doce alturas distintas sin criterio, así que un menú acababa por debajo de una tarjeta sin que nadie supiera por qué. Cinco alturas, de abajo a arriba. */ --capa-fondo:2; --capa-pegado:20; --capa-menu:40; --capa-ventana:60; --capa-encima:90; /* ============ PANTALLAS ============ (a partir de qué ancho cambia la maqueta) Cuatro cortes, no doce. Los que había (520, 560, 600, 640, 680, 820, 860, 900, 1100, 1200, 1400, 1500) son doce formas de decir lo mismo. Se citan aquí como referencia: una regla de pantalla no puede usar un nombre de variable, así que el valor va escrito, pero el que escribe una regla nueva mira esta lista y usa uno de los cuatro. móvil 640px · tableta 860px · portátil 1200px · pantalla grande 1500px */ /* --- formas --- */ --r-pill:999px; --r-in:11px; --r-card:14px; --r-lg:18px; --r-hero:22px; /* Radios pequeños, los de un chip, un botón menudo o una miniatura */ --r-xs:6px; --r-sm:7px; --r-md:8px; --r-9:9px; --r-10:10px; --r-12:12px; --r-circle:50%; --fs-hero:clamp(2.4rem,5.5vw,3.4rem); --fs-h1:clamp(1.7rem,3vw,2.6rem); --fs-h2:clamp(1.1rem,1.8vw,1.35rem); --fs-lead:clamp(1rem,1.3vw,1.1rem); /* El escalon que faltaba. Los encabezados de tercer nivel del lector de documentos lo pedian y no existia, asi que se quedaban del tamano del texto normal. Va entre el de segundo nivel y el cuerpo. */ --fs-h3:clamp(1rem,1.5vw,1.15rem); --fs-stat:clamp(2rem,4vw,2.5rem); --fs-body:.95rem; --fs-sm:.82rem; --fs-xs:.7rem; /* ESCALA DE LETRA COMPLETA. Ocho escalones y ninguno más. El tablero de la película heredaba del cuadro de mandos del DNA una lista de TREINTA tamaños distintos, la mayoría de un solo uso, con .85, .86, .87 y .88 conviviendo. Eso no es una escala: es escribir a ojo, y son diferencias que nadie ve. Cada tamaño suelto se llevó al escalón más cercano. */ --fs-2xs:.62rem; --fs-md:.88rem; --fs-lg:1.05rem; --fs-xl:1.2rem; --fs-2xl:1.4rem; --fs-3xl:1.7rem; --fs-4xl:2.6rem; /* Escala de letra en píxeles, la que usan los tableros de serie por dentro. Igual que con el espaciado, son los valores que ya había: pasan al sistema sin cambiar de tamaño. */ --t-9:9.5px; --t-10:10px; --t-10b:10.5px; --t-11:11px; --t-11b:11.5px; --t-12:12px; --t-12b:12.5px; --t-13:13px; --t-13b:13.5px; --t-14:14px; --t-8:8px; --t-8b:8.5px; --t-9b:9px; --t-15:15px; --t-15b:15.5px; --t-16:16px; --t-16b:16.5px; --t-17:17px; --t-18:18px; --t-20:20px; --t-22:22px; --t-23:23px; --t-24:24px; --t-25:25px; --t-26:26px; --t-29:29px; --t-34:34px; --t-42:42px; /* --- menú de dos columnas (rail + panel) y curva de transición --- */ /* Ancho del menú lateral. La curva de animación vive arriba, en MOVIMIENTO. */ --sidebar-w:248px; --sidebar-w-collapsed:76px; } /* ============ EL MODO DE COLOR DEL NAVEGADOR ============ Le dice al navegador en que tema esta la pagina, y con eso pinta lo que dibuja EL: la barra de desplazamiento, los campos de formulario, los desplegables nativos y el fondo que asoma antes de que cargue la hoja. NO ES UN COLOR y por eso vive en el esqueleto: no dice que tono usar, dice en que modo estamos, y vale igual para todas las marcas. FALTABA EN TODO EL SISTEMA (2026-08-12). Se descubrio al enchufar al sistema tres piezas de Land of Nomads que SI lo declaraban dentro: quitarles su bloque de color les habria quitado tambien esto, y en tema oscuro se habrian quedado con las barras y los campos nativos en blanco. Un caso de manual de la regla de la casa: lo que le falta al sistema se le anade AL SISTEMA, para todas las marcas, no se parchea en la pieza. */ :root{color-scheme:light} html[data-theme="dark"],:root[data-theme="dark"]{color-scheme:dark} /* ============================================================================ PALETA FUNCIONAL · común a TODAS las marcas ============================================================================ Los colores que significan algo y no cambian de marca: el verde de «hecho», el ámbar de «pendiente», el rojo de «error», los cuatro colores con los que se marca una persona, un lugar, un objeto o una prenda dentro de un texto, los velos sobre foto y las familias de aviso. Un error es rojo en Codrex y en Land of Nomads. Sacarlos de aquí a cada marca sería obligar a cada cliente a re-decidir lo mismo, y a que dos tableros que hacen lo mismo no se parezcan. Ya pasó: el 2026-08-09 se midieron 154 colores escritos a mano por los tableros, con cinco verdes distintos para «hecho». Una marca puede pisar uno de estos si de verdad lo necesita, declarándolo en su propio archivo. Debería ser raro. NO SE EDITA A MANO: sale de partir `tokens.css`. ============================================================================ */ :root{ /* `--accent-deep` SE MUDÓ A LA CAPA DE MARCA el 2026-08-11. Estaba aquí escrito como `#688E01`, que es el lima de OH WOW! con la luz bajada. O sea: un color de UNA marca viviendo en la capa que comparten TODAS. Con una sola marca no se notaba; en cuanto se montó Codrex, cuyo acento es violeta, su etiqueta de «completo» salía verde lima. Ahora cada marca declara el suyo, y la comprobación del generador obliga a que ninguna se lo deje. Ver `_fuente/marcas/.css`. */ /* --- paleta de apoyo --- */ --blue:#3D6EFF; --blue-ink:#1F3FA8; --purple:#B998E5; /* --- COLORES DE ESTADO (ver cabecera) --- Un tablero NO escribe un verde ni un rojo suyo: pide el de la casa. Antes cada uno tenía el suyo (medidos 154 colores distintos escritos a mano el 2026-08-09, con cinco verdes de "hecho" y dos familias de morado para la misma etiqueta), y por eso dos tableros que hacen lo mismo no se parecían. */ /* CALIBRADOS el 2026-08-10 midiendo la letra que va encima. Los de antes se quedaban cortos: el verde daba 4,38 con letra blanca y el ámbar 3,87, cuando el mínimo para texto es 4,5. Se han oscurecido lo justo para pasar sin cambiar de color. */ --ok:#1E864A; --ok-hover:#1a7340; /* hecho, completado, generado · blanco encima: 4,60 */ /* EL MISMO VERDE, PERO PARA HACER DE LETRA (2026-08-10). Igual que pasa con el lima, el verde de «hecho» está calibrado para llevar letra ENCIMA, no para ser letra: sobre el papel claro se queda en 4,03 y el mínimo son 4,5. Medido en el catálogo, en el título de una micro-escena terminada. Este es el mismo verde un punto más hondo (el que ya se usaba al pasar el ratón), y da 5,51 sobre una caja y 5,15 sobre el papel. En tema oscuro no hace falta bajarlo: el verde de allí ya da 4,82, así que apunta al mismo. */ --ok-ink:#1a7340; --warn:var(--text); /* aviso, pendiente de revisar · es la tinta de la marca. El ámbar se retiró el 2026-10-04 por orden del CEO: no es un color aprobado */ --danger:#a5301f; /* excedido, error · blanco encima: 6,90 */ /* Letra encima de un color saturado. En tema CLARO los estados son oscuros y va blanca. En oscuro se invierte, porque allí los estados se aclaran para destacar sobre el fondo y el blanco deja de leerse (ver el bloque de tema oscuro). */ --on-solid:#fff; /* Etiqueta de modelo y de toma: un degradado, no un color plano */ /* RETIRADO EL MORADO el 2026-08-10, por orden del CEO. Esta pareja pintaba la etiqueta de modelo y de toma con un degradado morado-magenta, resto del acento viejo que se derogó el 2026-08-09. El acento de la casa es el lima, y no hay un segundo acento. El degradado sigue siendo degradado, pero de dos limas: el de la casa y uno más hondo. Con tinta encima dan 14,47 y 9,86, muy por encima del mínimo de 4,5. */ --tag-a:var(--lime); --tag-b:#9FD40F; --tag-glow:rgba(193,254,26,.28); /* Tierra y hierba: colores de familia, para etiquetas y avisos suaves */ --rust:#a8481f; --sage:#5f6f50; --alert-soft:#f6d9d2; --alert-ink:#4a1710; --alert-line:#E0B4A9; /* Familia del NO: una idea descartada en la votación. Del más suave al más fuerte. */ --no-bg:#fbeeea; --no-line:#f5b7ac; --no-ico:#b33325; --no-fuerte:#96271d; --no-hover:#7c1d14; /* Crecimiento y señal: el verde de "esto sube" y el rojo de "esto avisa". Vienen de las piezas que la comunidad de Imperio construyó con la casa, y las nueve los usaban por su cuenta. Son de la casa, no de cada pieza. */ --growth:#00CB43; --growth-deep:#0A7331; --signal:#FC291E; --signal-deep:#B3140B; /* Fondo y filete para una caja MARCADA COMO RECHAZADA. Un rojo muy lavado: tiene que reconocerse de un vistazo entre veinte tarjetas sin gritar ni tapar la foto, y la letra de dentro se sigue leyendo encima. */ --rechazado-fondo:#fdeeeb; --rechazado-filete:#f0c3ba; /* El rojo del BOTON ya marcado. El rojo de estado se queda en 4,46 sobre blanco en tema oscuro, justo por debajo del minimo de 4,5: este baja de luz lo justo para pasarlo con holgura sin dejar de ser el mismo rojo. */ --rechazado-boton:#B3140B; /* Familia del OJO: una idea con reparo, o pendiente de mirar */ --duda-bg:#fbf0d6; --duda-line:#f2dca8; --duda-ico:#6b4a12; /* --- LAS CUATRO FAMILIAS DE MENCIÓN --- Dentro de un texto, cada mención se marca según lo que ES: una persona, un sitio, un objeto o una prenda. Cada familia lleva su color de letra y su fondo suave. Estaba escrito por separado en cada tablero, con tonos distintos para lo mismo: el tablero de la película pintaba el lugar en azul y el de Sangre de Luna en morado. Los valores de aquí son los de la película, que el CEO señaló como canon el 2026-08-09. */ --fam-persona:#5b34c0; --fam-persona-bg:rgba(91,52,192,.13); --fam-lugar:#1C5470; --fam-lugar-bg:rgba(31,90,120,.13); --fam-objeto:#6E4A12; --fam-objeto-bg:rgba(122,84,20,.14); --fam-prenda:#2A5C44; --fam-prenda-bg:rgba(45,100,72,.14); /* LA QUINTA FAMILIA: lo que no es persona, sitio, objeto ni prenda (CEO, 2026-08-11). Un pacto, una ley, un territorio, un rito. Existia en los datos y NO tenia color, asi que al pasar el raton por encima la etiqueta se quedaba con el fondo transparente y la letra del color del papel: invisible sobre oscuro, sin dar ningun error. */ --fam-mundo:#8A2B4E; --fam-mundo-bg:rgba(138,43,78,.13); /* --- REFERENCIA Y BLOQUEO --- Un aviso dentro de la página: la caja de "esto viene de aquí" y la de "esto está bloqueado". Fondo tenue, filete del mismo color e icono más saturado. */ --nota-bg:rgba(91,52,192,.09); --nota-line:rgba(91,52,192,.32); --nota-ico:#5b34c0; --bloq-bg:var(--surface-strong); --bloq-line:var(--text-soft); --bloq-ico:var(--text); /* Elegido: el botón que ya tiene a alguien asignado */ --puesto-bg:rgba(91,52,192,.10); --puesto-line:rgba(91,52,192,.40); /* El ámbar de "ojo con esto", en su versión de relleno y en su punto */ --warn-fill:var(--text); --warn-dot:var(--text); /* Gris del botón oscuro al pasar por encima */ --dark-hover:#3A3A3A; /* FONDO DEL BOTÓN SÓLIDO AL PASAR EL RATÓN (2026-08-11). Un botón sólido se pinta con `--text` de fondo y `--on-solid` de letra, y esos dos SE DAN LA VUELTA con el tema: en claro es fondo casi negro con letra blanca, y en oscuro fondo casi blanco con letra casi negra. El estado de ratón encima usaba `--dark-hover`, que es gris oscuro en los dos temas, así que en tema oscuro el botón pasaba de fondo claro a fondo oscuro SIN que la letra cambiara: gris #4A4A42 con letra #1A1815 encima da 2,05 de contraste y el botón se queda en blanco al pasar por encima (mínimo exigido: 4,5). Este token se mueve en la MISMA dirección que el botón: en claro aclara el negro, y en oscuro apaga el crema. Con `--on-solid` encima da 11,37 en claro. `--dark-hover` NO se toca porque además sirve de color de LETRA en otras piezas, y allí invertirlo rompería lo contrario. */ --solid-hover:#3A3A3A; /* NEGRO QUE NO SE INVIERTE. Existe para los pares de contraste: una etiqueta con fondo oscuro y letra lima encima tiene que seguir siendo oscura en los DOS temas. Si se usa --text, en oscuro el fondo pasa a casi blanco y la letra lima queda invisible (medido el 2026-08-10: 1,02 de contraste, cuando el minimo es 4,5). Este token NO cambia con el tema, a proposito. */ --tinta-fija:#1A1A1A; /* --- VELOS: capas translúcidas sobre foto o sobre el papel --- */ /* LETRA SOBRE UN VELO OSCURO. NO se invierte con el tema, y ese es todo el asunto (2026-08-10). Los velos de aquí abajo son oscuros SIEMPRE, en los dos temas, porque van encima de una foto. Lo que se escribe encima tiene que ser claro SIEMPRE. Se estaba usando --on-solid, que sí se da la vuelta en oscuro, así que el botón «Añadir», la cruz de cerrar, las flechas del visor y la lupa de la esquina salían con letra casi negra sobre un velo casi negro: contraste 1,06, o sea invisible. En claro se veía bien y por eso nadie lo cazó. */ --on-veil:#fff; /* LA LETRA CUANDO EL VELO ES CLARO (anadido el 2026-08-12). Habia `--on-veil` para el velo oscuro, y nada para el contrario: una pastilla clara puesta encima de una foto, que necesita letra oscura. Sin este nombre, quien lo necesitaba tiraba de `--text` o de `--ink`, y esos SE DAN LA VUELTA con el tema: en oscuro la letra se aclaraba y desaparecia sobre su propia pastilla clara. Encima de una foto el tema no cambia nada, asi que este par tampoco puede cambiar. Lo destapo el distintivo de acceso del laboratorio de Land of Nomads. */ --on-veil-light:#141414; --veil-dark:rgba(15,12,10,.92); /* fondo de ventana ampliada */ --veil-btn:rgba(28,26,23,.86); /* botón encima de una imagen */ --veil-ico:rgba(37,37,37,.6); /* icono de ampliar, esquina de la foto */ --veil-light:rgba(255,255,255,.14); /* control claro sobre imagen oscura */ --veil-light-2:rgba(255,255,255,.28); --veil-light-3:rgba(255,255,255,.30); --veil-light-4:rgba(255,255,255,.75); --shade-soft:rgba(0,0,0,.06); /* sombra apenas visible bajo una pieza */ --shade:rgba(0,0,0,.3); --shade-1:rgba(0,0,0,.10); /* la escala completa de sombra, de menos a más */ --shade-2:rgba(0,0,0,.18); --shade-3:rgba(0,0,0,.28); --shade-4:rgba(0,0,0,.40); /* Velos de TINTA: el mismo negro de la letra, rebajado. Se usan para oscurecer una zona sin teñirla, que es lo que hace un negro puro. */ --veil-ink-fuerte:rgba(37,37,37,.93); --veil-ink-medio:rgba(37,37,37,.5); --veil-ink-suave:rgba(37,37,37,.28); --veil-ink-tenue:rgba(37,37,37,.16); /* Velos sobre una foto MUY oscura, la escala del visor a pantalla completa */ --veil-dark-medio:rgba(15,12,10,.6); --veil-dark-suave:rgba(15,12,10,.28); --veil-dark-tenue:rgba(15,12,10,.22); /* --- LAS CUATRO CATEGORÍAS DE LAS PIEZAS DE LA COMUNIDAD --- Azul, morado, ámbar y rosa. NO son las cuatro familias de mención de arriba (esas van sobre texto y por eso son más apagadas): estas titulan bloques y van sobre el papel. Vienen de las nueve piezas de Imperio, que las escribían cada una por su cuenta. */ --cat-azul:#2F5FD8; --cat-morado:#8B5CC7; --cat-ambar:#C07B1F; --cat-rosa:#C2417A; --cat-ambar-deep:#97631D; /* --- REDES SOCIALES --- Color de marca AJENA, no de la casa: no se retoca ni se armoniza. Solo sube de luz en oscuro, lo justo para que se lea. */ --red-linkedin:#0A66C2; --red-instagram:#C13584; --red-facebook:#1877F2; /* --- NEGRO DE REPRODUCTOR --- Detrás de un vídeo va negro en los dos temas: cualquier otro tono se ve como un marco alrededor de la imagen. */ --negro-video:#0E0D0B; /* --- PANEL NOCTURNO --- Un bloque que va oscuro SIEMPRE, viva en el tema que viva (la ficha de caso de Voz Propia). Azulado a propósito, para separarlo del papel de la casa. */ --noche-bg:#0B0E15; --noche-surface:#10131A; --noche-text:#D6D9E2; --noche-veil:rgba(10,14,21,.62); /* ========================================================================== NOMBRES CORTOS HEREDADOS (2026-08-10) ========================================================================== Las reglas que subieron desde los tableros al sistema (fichas con foto, visor de imagen, micro-escena, lista de pendientes) traían los nombres de color CORTOS que se usaban allí: --card, --page, --ink2, --mut, --k0, --k3, --k9, --k10, --line, --shadow. Esos nombres se definían en la hoja PROPIA de cada tablero, no aquí, así que la hoja compartida pedía diez colores que el sistema no tenía. Un nombre de color que no existe NO da error: la regla se ignora en silencio. Por eso el pie del visor salía con fondo transparente y letra oscura sobre un velo negro, o sea invisible, y el botón de copiar el prompt no se veía. En los tableros funcionaba porque cada uno seguía declarándolos por su cuenta; en el sistema solo, no. Un tablero nuevo que cargara únicamente esta hoja habría nacido roto. Se resuelven aquí, cada uno sobre el nombre bueno. No hace falta repetirlos en el tema oscuro: un nombre que apunta a otro se resuelve en el momento de usarlo, así que al cambiar de tema siguen solos al color que les toca. Son un puente, no vocabulario nuevo: en una regla NUEVA se escribe el nombre de la derecha, nunca el de la izquierda. ========================================================================== */ --page:var(--bg); /* el papel de la página */ --card:var(--surface); /* la superficie de una caja */ --k0:var(--bg); --k3:var(--surface-strong); --k9:var(--accent); /* el lima, como fondo */ --k10:var(--accent-ink); /* el lima, como letra */ --ink2:var(--text-dim); --mut:var(--text-soft); --line:var(--rule); --shadow:var(--sh-1); /* Tres nombres que el CSS de las peliculas PIDE y que nadie habia declarado. Encontrados por el control de calidad el 2026-08-12 midiendo lo servido: un color que no existe deja el elemento sin pintar y NO da ningun error, asi que nadie se entera hasta que ve el hueco. Es el fallo conocido numero 125. --brand lo usa el contorno de foco de cuatro controles. --muted lo piden seis sitios; ya existia el mismo con otro nombre (--mut), y ahora conviven los dos en vez de tocar el CSS de cada tablero. --surface-2 fondo del estado de raton encima de dos botones. */ --brand:var(--accent); --muted:var(--text-soft); --surface-2:var(--surface-alt); } html[data-theme="dark"]{ /* Los estados suben de luz sobre fondo oscuro, para que sigan destacando */ /* En oscuro los estados SUBEN de luz para destacar sobre el fondo. Y por eso la letra que va encima tiene que BAJAR: con blanco daban 3,41 el verde, 2,69 el ámbar y 4,13 el rojo, todos por debajo del mínimo de 4,5 (medido el 2026-08-10). Con tinta encima pasan los tres. El rojo, además, sube un punto de luz para llegar: con el anterior se quedaba en 4,29. */ --ok:#3a9d5d; --ok-hover:#2e9e5b; /* tinta encima: 5,20 */ --ok-ink:var(--ok); /* como letra ya llega: 4,82 sobre una caja */ --warn:var(--text); /* tinta encima: 6,59 */ --danger:#D4624D; /* tinta encima: 4,77 */ --on-solid:#1A1815; /* SE INVIERTE: aquí los estados son claros */ /* En oscuro, el mismo degradado de limas. El lima ya destaca sobre fondo oscuro, así que no hace falta subirlo de luz: se usa tal cual. */ --tag-a:var(--lime); --tag-b:#9FD40F; --tag-glow:rgba(193,254,26,.22); --veil-ico:rgba(20,17,14,.55); --rust:#d98a5f; --sage:#9fb089; --alert-soft:#3A211C; --alert-ink:#f6d9d2; --alert-line:#5A342C; /* En oscuro, el verde y el rojo bajan de saturación para no vibrar sobre el fondo */ --growth:#3ad973; --growth-deep:#1f9a52; --signal:#ff6a5c; --signal-deep:#d13d31; /* El mismo par, en oscuro: el rojo baja de luz para no deslumbrar sobre el papel oscuro, y el filete sube para seguir marcando el borde. */ --rechazado-fondo:#2b1512; --rechazado-filete:#6b2a22; --rechazado-boton:#a52b22; --no-bg:#2a1815; --no-line:#5a342c; --no-ico:#f0a79b; --no-fuerte:#e3b5ac; --no-hover:#c93a2a; --duda-bg:#3a2e14; --duda-line:#6b4a12; --duda-ico:#f2dca8; /* Las CINCO familias suben de luz sobre fondo oscuro, para que se sigan leyendo */ --fam-persona:#C3B0F7; --fam-persona-bg:rgba(155,124,240,.20); --fam-lugar:#A6D4EA; --fam-lugar-bg:rgba(110,180,220,.18); --fam-objeto:#E6C68C; --fam-objeto-bg:rgba(214,166,84,.18); --fam-prenda:#A8DCC2; --fam-prenda-bg:rgba(120,200,160,.18); --fam-mundo:#F0AFC6; --fam-mundo-bg:rgba(224,140,175,.18); --nota-bg:rgba(124,91,224,.16); --nota-line:rgba(124,91,224,.42); --nota-ico:#A98CF0; --bloq-bg:var(--surface-strong); --bloq-line:var(--text-soft); --bloq-ico:var(--text); --puesto-bg:rgba(124,91,224,.20); --puesto-line:rgba(124,91,224,.50); --warn-fill:var(--text); --warn-dot:var(--text); --dark-hover:#4A4A42; /* En oscuro el botón sólido es CLARO, así que su estado de ratón encima tiene que apagarse un punto, no oscurecerse de golpe. Es el mismo crema de `--text` bajado de luz. Con la letra `--on-solid` encima da 12,20. */ --solid-hover:#D8D2C6; /* Las cuatro categorías y las tres redes suben de luz sobre fondo oscuro. El negro del reproductor y el panel nocturno NO cambian: ya son oscuros por definición. */ --cat-azul:#8BA9FF; --cat-morado:#C8ADF0; --cat-ambar:#E6B45F; --cat-rosa:#F093BF; --cat-ambar-deep:#E0BD82; --red-linkedin:#5AA0E6; --red-instagram:#E888C0; --red-facebook:#6AA6F7; /* Sobre fondo oscuro, un velo de tinta no oscurece: hay que aclarar. Se invierten. */ --veil-ink-fuerte:rgba(241,236,226,.26); --veil-ink-medio:rgba(241,236,226,.16); --veil-ink-suave:rgba(241,236,226,.13); --veil-ink-tenue:rgba(241,236,226,.08); } :root{ /* EL LIMA HONDO (CEO, 2026-08-10). El lima de la casa sobre el papel claro da 1,05: una barra de avance rellena de lima sobre crema no se ve, y el CEO lo pidió mirando justo eso. Es el MISMO lima (tono 76 grados, saturación 99 %, idéntico), solo con la luz bajada del 55 % al 28 %. Sigue siendo lima a la vista, no verde oliva ni verde hierba, pero ya da 3,37 sobre el papel y 3,60 sobre una caja: por encima del 3,00 que pide una forma sin letra. PARA QUÉ es: el relleno de una barra, un filete fino, una etiqueta rellena sobre papel claro. NO es para hacer de LETRA (para eso está `--accent-ink`) ni para llevar letra encima (para eso está `--accent`). */ --accent-deep:#688E01; } html[data-theme="dark"]{ /* En oscuro NO hace falta bajarlo: el lima sobre el fondo oscuro ya da 13,4, así que el lima hondo apunta al de siempre. Bajarlo aquí sería empeorarlo. */ --accent-deep:var(--lime); } /* ============================================================================ MARCA · CODREX ============================================================================ LA IDENTIDAD, Y NADA MÁS. Las 22 variables por tema que cambian de una marca a otra. El verde de «hecho», el rojo de un error y las familias de mención vienen de `paleta-funcional.css` y son las mismas que en todas las marcas. ORIGEN. Los valores salen del sistema de diseño de Codrex que ya existe en `brains/dna/business/codrex/website/assets/tokens.css` (identidad Liquid Cortex). No se ha inventado ni un color: se han MAPEADO sus nombres a los del sistema de tableros, que son distintos. Codrex -> sistema de tableros --strong --text (titulares y texto principal) --text (no se usa: aquí --text hace las dos cosas) --muted --text-dim --faint --text-soft --surface-2 --surface-alt --inset --surface-strong --line --rule --accent-strong --accent-ink DOS DECISIONES QUE NO SON COPIA, Y POR QUÉ: 1. EL ACENTO NO ES SU VIOLETA PRINCIPAL. Codrex usa `#7B61FF` como acento de marca, pero con letra blanca encima da 4,21 y el mínimo para texto pequeño es 4,5. Su propio archivo ya lo había resuelto: para los botones con texto blanco usa el violeta profundo `#5B44D6`. Aquí se hace lo mismo, porque en un tablero el acento es sobre todo fondo de botón y de etiqueta. El violeta claro sigue siendo la marca; lo que cambia es cuál se usa como relleno. 2. LA LETRA SOBRE EL ACENTO SE DA LA VUELTA CON EL TEMA. En claro el acento es un violeta oscuro y encima va BLANCO. En oscuro el acento se aclara para destacar sobre el fondo grafito, y encima va la TINTA. Es al revés que en OH WOW!, donde el lima es claro en los dos temas y siempre lleva tinta. Copiar el `--on-accent` de otra marca es el fallo más fácil de cometer, y deja botones ilegibles solo en un tema. TIPOGRAFÍA. El canon de Codrex es PP Neue Montreal, con Geist como fuente de trabajo mientras no esté licenciada. Para que se vea, el archivo de la fuente tiene que estar publicado junto al tablero; si no está, cae a la de sistema y se nota. Se declara la cascada completa, no un solo nombre. ============================================================================ */ :root{ /* --- el papel y las cajas --- */ --bg:#F4F5F8; --surface:#FFFFFF; --surface-alt:#EDEFF4; --surface-strong:#E4E7ED; /* --- la tinta y sus dos grises --- */ --text:#14161B; --text-dim:#565C68; --text-soft:#636975; /* --- los filetes --- */ --rule:#E1E3EA; --hairline:1.5px solid var(--text); --hair-soft:1px solid var(--rule); /* --- el acento (ver la nota 1 de la cabecera) --- */ --accent:#5B44D6; --accent-hover:#503CBC; --accent-ink:#5B44D6; --on-accent:#FFFFFF; /* EL ACENTO PARA HACER DE FORMA, no de fondo con letra. En OH WOW! hace falta un tono aparte, porque su lima es tan claro que sobre el papel crema desaparece (1,05). Aquí no: el violeta de la marca ya es oscuro y da 6,17 sobre el papel, muy por encima del 3,00 que pide una forma sin letra. Así que apunta al acento y no se inventa un color nuevo. Cada marca declara el suyo desde el 2026-08-11: antes vivía en la capa compartida con el lima de OH WOW! dentro, y la etiqueta de «completo» de Codrex salía verde. */ --accent-deep:var(--accent); /* --- lo activo y lo seleccionado: se invierte con el tema --- */ --ink:#14161B; --on-ink:#FFFFFF; /* `--lime` es el nombre historico del acento de OH WOW!, y sigue vivo porque hay piezas que lo piden por su nombre. Aqui apunta al acento de ESTA marca, para que ninguna se quede sin color. Land of Nomads hace lo mismo por el mismo motivo. Se retira el dia que nadie lo pida. */ --lime:var(--accent); /* --- el relieve, con la tinta de la marca --- */ --sh-1:0 1px 2px rgba(20,22,27,.05); --sh-2:0 14px 34px rgba(20,22,27,.08); --sh-3:0 30px 80px rgba(91,68,214,.12); /* --- tipografía --- */ --font:'PP Neue Montreal','Geist',system-ui,-apple-system,sans-serif; --display:'PP Neue Montreal','Geist',system-ui,-apple-system,sans-serif; --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; } html[data-theme="dark"]{ --bg:#101216; --surface:#191C22; --surface-alt:#20242B; --surface-strong:#282C34; --text:#FFFFFF; --text-dim:#969CAC; --text-soft:#8C93A2; --rule:#2A2E37; --hairline:1.5px solid rgba(255,255,255,.28); --hair-soft:1px solid #2A2E37; /* El acento se aclara para destacar sobre el grafito, así que la letra de encima pasa a ser oscura. Ver la nota 2 de la cabecera. */ --accent:#9E8FFF; --accent-hover:#AA9CFF; --accent-ink:#9E8FFF; --on-accent:#101216; /* Sobre el grafito el violeta claro da 6,36: tampoco hace falta tono aparte. */ --accent-deep:var(--accent); --ink:#FFFFFF; --on-ink:#101216; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 14px 34px rgba(0,0,0,.34); --sh-3:0 30px 80px rgba(0,0,0,.5); } /* ============ RESET / BASE ============ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font);font-size:var(--fs-body);line-height:1.5;color:var(--text); background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background .3s,color .3s} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none} h1,h2,h3,h4{font-family:var(--display);line-height:1.1;font-weight:500;letter-spacing:-.015em} ::selection{background:var(--accent);color:var(--on-accent)} input,select,textarea{font-family:inherit;color:inherit} button,a,label,summary,[role="button"],[onclick]{cursor:pointer} *{scrollbar-width:thin;scrollbar-color:var(--rule) transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--rule);border-radius:99px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--text-soft);background-clip:content-box} ::-webkit-scrollbar-corner{background:transparent} code,.mono{font-family:var(--mono)} img{max-width:100%;display:block}