/* ============================================================================ TOKENS · oh-wow ============================================================================ 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/oh-wow.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; /* ============ 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:#19703E; --warn:#A16608; /* aviso, pendiente de revisar · blanco encima: 4,75 */ --warn-ink:#8A5707; --danger:#a5301f; /* excedido, error · blanco encima: 6,90 */ --danger-ink:#A5301F; /* ── LAS TRES TINTAS SE MIDEN SOBRE SU CAJA, NO SOBRE EL PAPEL ──────────── Un aviso no se pinta sobre el papel: se pinta sobre una caja teñida con su propio color al 12 %, que es MÁS OSCURA que el papel. Medir sobre el papel da un número mejor del real y deja pasar colores que no llegan. Medido el 2026-08-23 componiendo esa mezcla, que es la trampa del gotcha 139 (una sonda que no compone el alfa miente en las dos direcciones): · el ámbar de antes daba 3,61 sobre su caja, con el mínimo en 4,5; · el ámbar que ya se había «arreglado» a #935C07 daba 4,15, y TAMPOCO llegaba: se había medido contra el papel (4,87) en vez de contra la caja; · y el verde, que se daba por resuelto desde el 2026-08-10, daba 4,37. Estos tres pasan sobre su caja: ámbar 4,54, verde 4,55, rojo 5,01. El rojo no cambia de valor, solo se le pone nombre para que nadie tenga que averiguar si sirve. */ /* 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:rgba(176,106,17,.12); --bloq-line:rgba(176,106,17,.42); --bloq-ico:#8A5310; /* 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:#E8A43B; --warn-dot:#B26A08; /* 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 */ --warn:#d4901f; /* tinta encima: 6,59 */ --danger:#D4624D; /* tinta encima: 4,77 */ /* Aquí las tintas SUBEN de luz en vez de bajarla, porque el fondo es oscuro. Medidas también sobre su caja teñida al 12 %, no sobre el fondo: · el verde se quedaba en 4,47 usando el mismo color del estado; · el rojo, en 4,16; · el ámbar ya llegaba con 5,52, así que apunta al suyo sin cambio. Con estos: verde 4,53, rojo 4,55, ámbar 5,52. */ --ok-ink:#3B9E5E; --warn-ink:var(--warn); --danger-ink:#D76E5A; --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:rgba(226,152,44,.16); --bloq-line:rgba(226,152,44,.45); --bloq-ico:#E9B45F; --puesto-bg:rgba(124,91,224,.20); --puesto-line:rgba(124,91,224,.50); --warn-fill:#E8A43B; --warn-dot:#E8A43B; --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 · OH WOW! ============================================================================ LA IDENTIDAD, Y NADA MÁS: el papel, las superficies, la tinta, los filetes, el acento y las tipografías. Son 22 variables por tema. ESTE ES EL ARCHIVO QUE SE COPIA PARA ABRIR UNA MARCA NUEVA. Se cambian los valores y se deja la estructura igual. Si una marca declara una variable de más, o se deja una sin declarar, los componentes dejan de funcionar en esa marca y no en las otras, que es el fallo más difícil de ver. Lo que NO va aquí: · El verde de «hecho», el rojo de un error, los colores con los que se marca una persona o un lugar dentro de un texto. Eso es FUNCIONAL, vale igual para todas las marcas y vive en `paleta-funcional.css`. · El aire, los radios y el movimiento: `esqueleto.css`. OJO AL ACENTO. `--on-accent` es la letra que va ENCIMA del acento, y cambia según lo claro que sea: con el lima de OH WOW! va tinta oscura; con un violeta o un rojo oscuro va blanca. Es el error más fácil de cometer al abrir una marca, y se comprueba con `revisar-pares-de-contraste.py` antes de darla por buena. ============================================================================ */ :root{ /* --- superficies --- */ --bg:#F5EFE6; --surface:#FBF7F0; --surface-alt:#EFE7DA; --surface-strong:#E5DDD0; --text:#1A1A1A; --text-dim:#5C5C5C; /* CORREGIDO el 2026-08-09. El tono de origen (#9a917f) da 2,73 sobre el papel y NO es legible como texto corrido (el mínimo es 4,5). Estaba así y cada tablero se lo sobreescribía por su cuenta, con lo cual el mismo texto salía de un color en la película y de otro en las series. Ahora el valor bueno vive AQUÍ y nadie lo redefine. */ --text-soft:#67635C; --rule:#E5DDD0; --hairline:1.5px solid var(--text); --hair-soft:1px solid var(--rule); /* --- acento de la casa (ver cabecera): lima en los dos temas --- */ --lime:#C1FE1A; --accent:var(--lime); --accent-ink:#46610A; --on-accent:#1A1A1A; /* EL LIMA AL PASAR EL RATON. Un boton de acento tiene que cambiar cuando le pasas el raton por encima, y ese cambio tiene que verse. Sin un tono propio, la regla apunta al mismo color en reposo y con el raton encima: el boton no responde. No es un lima inventado: es el segundo del degradado de la casa, el mismo que ya usan las etiquetas de modelo y de toma. Con la tinta encima da 9,86, muy por encima del minimo de 4,5. */ --accent-hover:#9FD40F; /* Par de lo activo y lo seleccionado: se invierte con el tema */ --ink:#1A1A1A; --on-ink:#FBF7F0; /* --- sombras --- */ --sh-1:0 1px 2px rgba(26,26,26,.05); --sh-2:0 10px 30px rgba(26,26,26,.10); --sh-3:0 12px 32px rgba(26,26,26,.16); /* --- tipografía --- */ --font:'Helvetica Neue',Helvetica,Arial,sans-serif; --display:'Sora','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; } html[data-theme="dark"]{ --bg:#1A1815; --surface:#221F1A; --surface-alt:#2A261F; --surface-strong:#37322A; --text:#F1ECE2; --text-dim:#b0a898; --text-soft:#9a9184; --rule:#37322A; --hairline:1.5px solid rgba(241,236,226,.28); --hair-soft:1px solid #37322A; --accent:var(--lime); --accent-ink:var(--lime); --on-accent:#1A1815; --accent-hover:#9FD40F; /* Invertido: sobre fondo oscuro, lo activo se marca con el papel claro */ --ink:#F1ECE2; --on-ink:#1A1815; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 10px 30px rgba(0,0,0,.5); --sh-3:0 14px 36px rgba(0,0,0,.6); } /* ============ 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}