/* ===================================================================== LAS FICHAS DE LA CASA — un solo sitio para todo el sistema grafico. La especificacion completa, con el porque de cada decision, vive en graphic_system.md. Este archivo es su forma ejecutable. ⚠️ LA LEY QUE SOSTIENE TODO LO DEMAS: un componente NUNCA nombra un color. Nombra una ficha. Cambiar de modo cambia las fichas, no los componentes. El 2026-07-28 un correo salio a produccion con un cian inventado (#4fd6e8) en vez del de la casa. Nadie lo eligio: se invento al escribir el archivo. De ahi sale esta ley. ⚠️ ESTE ARCHIVO SE CARGA ANTES QUE CUALQUIER OTRA HOJA. Si se carga despues, sus valores no llegan a tiempo y las hojas de pagina caen a sus propios respaldos. ═══════════════════════════════════════════════════════════════════ COMO ESTA ORGANIZADO (bloque D-1, 2026-08-04) — LOS DOS MODOS 1. LO QUE NO CAMBIA NUNCA: la marca, la forma, la letra, el vidrio. 2. OBSIDIANA — el juego oscuro. Es el de por defecto. 3. CRISTAL PERLADO — el juego claro. ⚠️ Y LA LEY §0 LEIDA POR EL OTRO LADO: si un componente no puede nombrar un color, LA FICHA TAMPOCO PUEDE LLAMARSE COMO UN COLOR. Las fichas se llamaban --void (negro), --snow (blanco), --ash (gris). Eso aguanta con un solo modo; con dos es una mentira escrita en el codigo, porque en Cristal Perlado --snow tendria que valer CASI NEGRO. Por eso ahora se llaman por su FUNCION: --fondo, --texto, --texto-2. ⚠️ LOS NOMBRES VIEJOS NO SE BORRARON: quedan como ALIAS de los nuevos, dentro de cada modo. Asi ni una linea del CSS de hoy hay que tocarla, y al cambiar de modo los alias cambian solos. Nada se borra (regla del fundador) y nada se rompe. ═══════════════════════════════════════════════════════════════════ */ /* ===================================================================== 1. LO QUE NO CAMBIA ENTRE MODOS ===================================================================== */ :root { /* ── COLOR DE MARCA ──────────────────────────────────────────────── El unico color de marca es Nix. Y solo donde Nix habla. ⚠️ NO inventar cianes parecidos: #00f2fe NO es el de la casa. ⚠️ EL NUCLEO DE NIX conserva este cian EN LOS DOS MODOS. Lo que si cambia es --nix-texto (mas abajo): el cian sobre fondo claro no se lee, y ahi va el mismo tono bajado. */ --nix-cyan: #00f0ff; --nix-glow: rgba(0, 240, 255, .6); /* ⚠️ EL CUERPO DE NIX —su nucleo y su halo— NO ESTA AQUI, aunque parezca que deberia: cambia entre modos. Vive en --nix-nucleo y --nix-halo-rgb, dentro de cada juego, con el porque completo escrito en el de Obsidiana. Lo que si es de aqui es el cian de marca de arriba. */ /* ⚠️ VERDE = SOLO ESTADO, jamas decoracion. Si se queda en bordes o iconos permanentes, dejo de ser estado y se elimina. */ --accent-green: #00ff88; /* ⚠️ EL ERROR ES NARANJA Y NO ROJO, y la razon es de MARCA, no de gusto: Ermine probablemente va a llevar rojo, y el rojo de error dentro de IDBox chocaria con el. Anticiparse a esa colision es arquitectura de marca (graphic_system.md §4, decision del fundador 2026-08-03). ⚠️ ESTA FICHA NACE PORQUE EL PRODUCTO SEGUIA EN ROJO. El campo invalido del formulario usaba #ff4d4d escrito a mano — de antes de que existiera la decision— y nadie lo habia vuelto a mirar. Se encontro el 2026-08-04 inventariando los colores sueltos para los dos modos: buscando una cosa aparecio otra. No cambia entre modos: un naranja de aviso que cambia de tono segun la piel deja de reconocerse, igual que el verde. */ --error: #f97316; /* EL PAPEL — lo impreso. Blanco en los dos modos, porque no es una superficie de la interfaz: es la hoja donde se enseña lo que va a salir de la impresora (el QR de qr.idbox.lat). Un QR negro sobre Obsidiana mentiria sobre como se ve en la caja. Nace el 2026-09-14. */ --papel: #ffffff; /* EL DESTELLO DE ACCESO CONCEDIDO — lo que hace una tarjeta o una fila cuando Nix aterriza en ella. Dura 250 ms y se va. ⚠️ VIVIA DUPLICADO A MANO en styles.css y en cabin.css, con los seis numeros escritos dos veces. Ahora es una ficha: el destello de la Caja y el de la cabina no pueden separarse nunca mas. ⚠️ ASI SE HACE EL NEON, Y ASI NO. Antes era una sola nube de 25 px al 60% mas un `inset` de 15 px: eso no es neon, es niebla verde — el inset ademas ensuciaba el interior y por eso se veia turbio. "Tiene mucho desenfoque o mucho halo, debe verse mas limpio, mas tech, mas radiante, mas neon" (fundador, 2026-08-03). Un tubo de neon de verdad son TRES cosas: un filo nitido pegado al borde, un halo corto e intenso, y una irradiacion tenue. Separadas, no mezcladas en una sola nube. Sin inset: el brillo va por fuera. ⚠️ Y AQUI EL NEON NO ROMPE §7. Lo que esa regla saca de la casa es "neon y resplandores COMO ESTILO PERMANENTE". Esto aparece 250 ms y desaparece: es estado, que es lo unico para lo que existe el verde. ⚠️ NO CAMBIA ENTRE MODOS a proposito: el verde es un estado, y un estado que cambia de tono segun la piel deja de reconocerse. */ --destello-verde: 0 0 0 1px rgba(0, 255, 136, .95), 0 0 6px rgba(0, 255, 136, .85), 0 0 16px rgba(0, 255, 136, .45); /* ⚠️ ESTE DEGRADADO ES LA EXCEPCION DEL FUNDADOR (graphic_system §7). Solo lo usa el boton Enviar del formulario. §7 saca de la casa los degradados de varios colores, y el lo mantuvo por nombre: "me permito romper la regla solo con ese boton". No usarlo en nada mas. */ --grad: linear-gradient(120deg, var(--nix-cyan), #c9b8ff, var(--accent-green)); /* ── EL VIDRIO ───────────────────────────────────────────────────── LA RECETA UNICA (bloque C, 2026-08-03): backdrop-filter: blur(var(--vidrio)) saturate(var(--sat)); ⚠️ 14 px Y NO 64. §5 exige que corra en Android de gama media, y el fundador lo comprobo de ojo contra una propuesta de 64: no se pierde nada. Se puede tener el efecto y que corra. ⚠️ SATURATE ES LO QUE HACE QUE SEA VIDRIO Y NO PAPEL. Sin el, un panel translucido se ve lavado; con el, el color de atras REVIVE al atravesarlo. Es lo que hacen Windows y Samsung. Cuesta lo mismo que el desenfoque solo. Hasta el bloque C el producto NO TENIA UN SOLO saturate() y llevaba SEIS desenfoques distintos (6, 8, 10, 12, 14 y 16). El desenfoque no cambia entre modos; --sat SI (esta en cada juego). */ --vidrio: 14px; /* ⚠️ --relieve y --relieve-sombra NO LAS USA NADIE HOY. Se dejan escritas porque nada se borra sin la palabra del fundador, y con su historia al lado: eran el volumen de la PERILLA del interruptor de AR, y salieron porque a 18 px un degradado con sombra proyectada no se lee como volumen — se lee como suciedad. "Deberia verse 2D y limpio sin nada encima." Sirven el dia que haga falta relieve en algo GRANDE. En algo chico, no: a ese tamano solo sobrevive la silueta. Los grises salen de los tres de base de §1. */ --relieve: linear-gradient(180deg, #242938, #141722); --relieve-sombra: 0 2px 5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16); /* ── LA REJILLA ──────────────────────────────────────────────────── El paso manda sobre las medidas: el encuadre es matematico, no a ojo. Escena 34x14, panel 34x12, un cuadro exacto de margen. */ --paso: 34px; /* ── TIPOGRAFIA ──────────────────────────────────────────────────── Inter. Tres pesos y ni uno mas: 600 titulos, 500 botones, 400 texto. La monoespaciada es SOLO para numeros que son datos —el ID, la hora, el saldo—. JAMAS para prosa ni para etiquetas. */ --sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", monospace; /* La escala, seis pasos. Los nombres dicen PARA QUE, no cuanto miden: asi el dia que un numero cambie, no hay que renombrar nada. */ --tam-terciario: 13px; /* la hora, etiquetas chicas */ --tam-secundario: 15px; /* la nota, el correo */ --tam-principal: 17px; /* el nombre del contacto */ --tam-subtitulo: 20px; --tam-titulo: 24px; /* el nombre del dueño */ --tam-grande: 32px; /* Caja publica, landing */ /* ── FORMA ───────────────────────────────────────────────────────── Cuatro radios, y cada uno significa un TAMANO DE COSA. Un radio deja de ser un gusto y pasa a decir de que tamano es lo que toca. ⚠️ CORREGIDOS EL 2026-08-03 (bloque C). Este archivo nacio ese mismo dia diciendo 6 / 10 / 14 / 999, y esos numeros ESTABAN MAL: se escribieron de la cabeza, sin contrastarlos ni contra la maqueta que el fundador ya habia aprobado de ojo (/sistema) ni contra lo que el producto usa hoy. De los cuatro, el fundador vio y aprobo DOS: el 8 y el 14. El 22 de la maqueta NUNCA fue un panel: era el marco del telefono falso, algo que el producto no tiene. El panel se fija en 18, un escalon por encima de la tarjeta, que es donde el producto ya vivia (14-16). NO devolverlos a 6 / 10 / 14. */ --r-chico: 8px; /* lo pequeno que se toca: botones, campos, chips */ --r-tarjeta: 14px; /* las tarjetas y las superficies con foto */ --r-panel: 18px; /* los paneles: la lista, la ficha, los menus */ --r-pildora: 999px; /* las pildoras */ } /* ===================================================================== 2. OBSIDIANA — el juego oscuro, y el de por defecto ⚠️ ESTOS VALORES SON LOS QUE YA CORRIAN. Este bloque NO CAMBIA UN PIXEL: solo les pone nombre de funcion y los agrupa por modo. ⚠️ Y HAY CINCO DONDE EL DOCUMENTO Y EL PRODUCTO NO COINCIDEN. Manda el producto, que es la leccion del 3 de agosto —los radios, el umbral de luz y el verde salieron mal por escribir cifras sin contrastarlas—. Quedan anotadas para que el fundador decida VIENDO los dos modos juntos, no aqui: ficha producto (vale) graphic_system.md dice --fondo #030305 #07080C --texto-2 #8a8a96 rgba(245,245,248,.62) --texto-3 #44444e rgba(245,245,248,.38) --linea rgba(255,255,255,.08) rgba(255,255,255,.10) --filo #2e2e38 rgba(255,255,255,.16) Ninguna es grave: son medio punto de gris. Pero son cinco, y el documento no se corrige a ojo. ===================================================================== */ :root, :root[data-modo="obsidiana"], .obsidiana { /* Los fondos. ⚠️ NUNCA negro puro: el absoluto se ve barato y el modo oscuro de Gmail lo invierte. */ --fondo: #030305; --fondo-2: #0a0c10; --superficie: #0e0e13; /* lo que se apoya sobre el fondo */ /* El texto, en tres niveles. */ --texto: #f5f5f8; --texto-suave: rgba(245, 245, 248, .75); --texto-2: #8a8a96; /* secundario */ --texto-3: #44444e; /* terciario, casi apagado */ /* Nix escrito. El TEXTO cian sobre fondo claro no se lee, y por eso esta ficha existe aparte. */ --nix-texto: var(--nix-cyan); /* ── EL CUERPO DE NIX ──────────────────────────────────────────────── ⚠️ ESTAS DOS FICHAS NACEN EL 2026-08-04, AL VER A NIX EN EL PANEL, y son la comprobacion que el bloque D-2 dejo escrita palabra por palabra: "el nucleo blanco de Nix es su ADN; ES LO PRIMERO A MIRAR CUANDO EL PANEL EXISTA, y se corrige viendolo". Lo destapo el fundador en cuanto lo vio: "no veo a Nix en su casa". MEDIDO SOBRE EL FONDO DE CADA MODO —su rincon esta vacio de luces a proposito, asi que detras hay --fondo pelado—: nucleo #FFF Obsidiana 20,61 Perlado 1,15 halo #00F0FF Obsidiana 14,63 Perlado 1,22 1,0 es "identico al fondo". En claro NIX DESAPARECIA ENTERO. No era poco contraste: era el personaje pintado del color del papel. ⚠️ NO SE INVENTO UN COLOR PARA ARREGLARLO. En Perlado los dos leen --nix-texto (#04697A) -> 5,52, que es LA FICHA QUE YA EXISTIA PARA ESTE MISMO PROBLEMA: "el cian de la casa sobre fondo claro no se lee. Mismo tono, bajado" (graphic_system.md §1). El del texto y el del cuerpo eran el mismo problema con dos caras. ⚠️ OBSIDIANA NO SE MUEVE UN BYTE: #fff y 0,240,255 son exactamente los que ya corrian. La ficha solo les pone nombre para que el otro modo pueda contestar distinto — que es la ley §0 entera. --nix-halo-rgb va en canales sueltos y no en un color porque las sombras del orbe llevan CUATRO transparencias distintas (.75 .38 1 .58) que se conservan tal cual: cambia el tono, no la receta del neon. 🟡 PENDIENTE DEL OJO DEL FUNDADOR: es el cuerpo de Nix, lo mas protegido de la casa. Se devuelve al blanco en una linea. */ --nix-nucleo: #fff; --nix-halo-rgb: 0, 240, 255; /* ── EL AVISO DEL TOPE ─────────────────────────────────────────────── El borde de la pantalla cuando la ronda se acaba. En canales sueltos porque la banda usa tres transparencias del mismo tono. ⚠️ ES LA UNICA FICHA QUE CAMBIA DE SIGNO ENTRE MODOS, y no es un gusto: MEDIDO, el blanco sobre Cristal Perlado da 1,15 de contraste — o sea nada. "Alumbrar" es sumar luz, y sobre un fondo casi blanco no queda margen para sumar. En claro el aviso es una SOMBRA que presiona el borde (17,19), que es lo que hace un mostrador de verdad y lo que §1 dejo escrito el 2026-08-06 al curar --panel-solido: lo que funciona igual en los dos modos es la sombra, no la opacidad. El blanco de Obsidiana no se mueve: 20,02. */ --tope-rgb: 255, 255, 255; /* Las lineas. 1 px y jamas mas gruesas: 1 px al 8% se lee como precision, 2 px al 3% como borron. */ --linea: rgba(255, 255, 255, .08); --borde: #1c1c24; /* El filo de luz: el borde SUPERIOR mas claro que los otros tres. Es la firma del vidrio y lo unico del glassmorphism que sobrevive en correo. */ --filo: #2e2e38; /* ── LAS SUPERFICIES DE VIDRIO ───────────────────────────────────── ⚠️ AQUI ESTABA LA MITAD QUE FALTABA DEL VIDRIO, y la cazo el fundador mirando su Caja: "las cuatro tarjetas siguen con el gris". El bloque C puso la receta, pero cada superficie seguia inventando su propio fondo a mano —doce rgba() distintos, entre .55 y .95—. Con un fondo al 85% detras de un desenfoque no hay nada que desenfocar: LA TARJETA SE TAPABA A SI MISMA. ⚠️ 30% Y NO 62% — decision del fundador DESPUES de ver el 62 funcionando: "ese gris embarra un poco el ecosistema, como que lo ensucia. Quiero algo mas parecido a las pantallas holograficas que son casi transparentes tipo Jarvis". Lo que cuesta, medido: en el peor caso —la camara apuntando a blanco puro, detras del velo al 60%— el texto principal pasa de 11,3:1 de contraste a 7,6:1. El minimo legible es 4,5:1. Si algun dia no alcanzara, el numero que sube es --velo, no este. */ --panel: rgba(20, 23, 34, .30); --panel-solido: #0b0d14; /* lo que se lee si o si */ --toque: rgba(255, 255, 255, .06); /* ⚠️ LOS CANALES DEL TOQUE, SUELTOS. Nacen el 2026-08-04 con la barra de Nix abierta sobre el panel claro: adentro hay CUATRO superficies suaves con transparencias distintas (.03 .05 .06) —el bloque de un mensaje, el campo, el boton de enviar, la foto— y una ficha sola no puede servirlas sin cambiarles el valor a todas. Se saca el TONO y se conserva cada transparencia, igual que con --nix-halo-rgb. Aqui son blancos, o sea EXACTAMENTE lo que ya corria. */ --toque-rgb: 255, 255, 255; --sat: 160%; /* El velo sobre la camara. §3 lo declara OBLIGATORIO: la camara muestra cualquier cosa —una pared blanca, un rincon negro— y sin un piso de contraste el texto desaparece con solo apuntar a otro lado. */ --velo: rgba(4, 5, 9, .60); /* Lo hundido: la pista del interruptor de AR. ES EL FILO DE LUZ AL REVES —sombra arriba, luz abajo— y por eso pertenece a la casa en vez de ser un injerto. ⚠️ UN 30% MENOS DE PROFUNDIDAD que la primera version, pedido del fundador: "haz que el boton se vea 30% mas 2D". No se interpreto de ojo — los cuatro numeros que producen el hundido se multiplicaron por 0,7 (2px->1,5 · 4px->3 · .72->.50 · .10->.07). Si pide otro porcentaje, se calcula igual desde estos y no desde el gusto. */ --hundido: rgba(3, 5, 9, .55); --hundido-sombra: inset 0 1.5px 3px rgba(0, 0, 0, .50), inset 0 -1px 0 rgba(255, 255, 255, .07); /* ── EL COLOR QUE VIVE DETRAS DEL VIDRIO ─────────────────────────── §2: "donde va el color: lo pone LO QUE HAY DETRAS, nunca el vidrio". ⚠️ DOS CAMBIOS CONTRA LA MAQUETA, Y LOS DOS TIENEN EL MISMO MOTIVO: EN LA MAQUETA NO HAY UN NIX QUE ESCUCHE. 1. NINGUNA DE LAS TRES ES CIAN. §4: el cian es de Nix y SOLO donde Nix habla. Una luz cian permanente rompe esa ley literalmente. 2. EL CUADRANTE SUPERIOR DERECHO QUEDA VACIO A PROPOSITO. Ahi vive `.nix-resplandor` —el cian que crece mientras sostienes a Nix— en `circle at 86% 6%`, y la luz de la maqueta caia en `82% 4%`: el mismo rincon, con cian al 22% fijo contra un resplandor que llega al 26%. El segundo que el dedo sostiene no se veia avanzar. "Ese halo detras de Nix mata el efecto de sostener por un segundo para hablar con Nix" (fundador) — lo vio de ojo, sin los numeros. ⚠️ NO volver a meter una luz en el cuadrante superior derecho, en ningun modo. */ --fondo-luz: radial-gradient(58% 38% at 14% 4%, rgba(120, 140, 255, .20), transparent 62%), radial-gradient(52% 34% at 92% 68%, rgba(120, 140, 255, .12), transparent 62%), radial-gradient(70% 42% at 40% 104%, rgba(255, 150, 90, .14), transparent 62%); /* ── LOS NOMBRES VIEJOS, COMO ALIAS ──────────────────────────────── No se borran (regla del fundador) y no hay que tocar una linea del CSS de hoy. Al cambiar de modo, estos cambian solos con el. ⚠️ EN CODIGO NUEVO SE USAN LOS DE ARRIBA. Estos existen para que la mudanza no rompa nada, no para seguir escribiendo con ellos: un nombre que dice un color miente en cuanto hay dos modos. */ --void: var(--fondo); --void-2: var(--fondo-2); --card: var(--superficie); --snow: var(--texto); --snow-dim: var(--texto-suave); --ash: var(--texto-2); --ash-dim: var(--texto-3); --line-2: var(--linea); } /* ===================================================================== 3. CRISTAL PERLADO — el juego claro ⚠️ EL CLARO NO ES BLANCO. Corrección del fundador (2026-08-03): "estamos tomando lo blanco literal". Un vidrio sobre blanco plano no es vidrio, es PAPEL — no hay nada que refractar, y por eso Nix desaparecia en el. El claro lleva color de verdad detras, igual que el oscuro: uno tira al negro y el otro al blanco, pero LOS DOS TIENEN ALGO DETRAS. ⚠️ TODAVIA NO SE VE EN NINGUNA PANTALLA. Se estrena en el panel de la memoria de negocio (webapp_nix.md §4b), que cubre la pantalla entera. Estos valores salen de graphic_system.md §1 y NO estan calibrados contra el producto: el primero que los vea de verdad va a ser el fundador, y ahi se afinan. COMO SE ENCIENDE, de dos maneras y a proposito: · toda la pantalla: document.documentElement.dataset.modo="perlado" · una sola parte:
(el panel) La segunda es la que necesita el panel blanco: una superficie clara dentro de una casa oscura, sin tocar el resto. ===================================================================== */ :root[data-modo="perlado"], .perlado { --fondo: #edeff4; --fondo-2: #f7f9fc; --superficie: #ffffff; --texto: #0b0d14; --texto-suave: rgba(11, 13, 20, .78); /* ⚠️ .62 Y NO .56 — PRIMERA CIFRA DE PERLADO CALIBRADA CONTRA EL PRODUCTO (2026-08-04, al estrenar el panel). El .56 venia de graphic_system.md §1, que es la maqueta, y el propio archivo lo tenia marcado en amarillo: "el valor del Perlado es el de la maqueta y todavia no se ha visto en el producto; se calibra al construir los dos modos". Esto es ese momento. LO QUE FALLABA, MEDIDO CONTRA LA SUPERFICIE DONDE EL TEXTO SE APOYA DE VERDAD —el cajon de vidrio, no el fondo de la pagina—: .56 sobre la pagina .............. 4,27 .56 sobre el cajon ............... 4,34 .56 sobre el cajon bajo la luz ... 4,06 <- el peor sitio El minimo legible es 4,5. NO LLEGABA EN NINGUNO DE LOS TRES. .62 sobre el cajon bajo la luz ... 4,91 .62 sobre el cajon ............... 5,33 ⚠️ EL VIDRIO EMPEORA LO CLARO, AL REVES QUE LO OSCURO, y eso es lo que no se veia desde la maqueta: --panel en Perlado es blanco al 38%, asi que ACLARA la superficie bajo el texto. Una tinta calibrada contra --fondo queda corta en cuanto se pone un cajon encima. En Obsidiana pasa lo contrario —el panel oscurece— y por eso alli el mismo nivel da 5,83. ⚠️ .62 Y NO .60 POR UNA COSA QUE NO PUDE MEDIR: .60 da 4,61, que pasa por 11 centesimas, y la cuenta NO modela el saturate(190%) del vidrio. El margen es para lo que no se midio, no para redondear bonito. 🟡 PENDIENTE DEL OJO DEL FUNDADOR. Es un tono que el escogio viendolo, y esto lo sube dos escalones. Se devuelve a .56 en una linea. */ --texto-2: rgba(11, 13, 20, .62); /* ⚠️ .56 Y NO .34 — APROBADO POR EL FUNDADOR el 2026-08-04 despues de ver los numeros. Lo destapo el rotulo "HABLANDO CON NIX" dentro de la barra con piel clara: daba 2,20 de contraste, o sea ilegible. .34 (antes) ... 2,20 en la barra · 2,23 en un cajon .56 (ahora) ... 4,19 en la barra · 4,34 en un cajon ⚠️ SIGUE POR DEBAJO DE 4,5, Y ES A PROPOSITO. Para llegar al minimo hay que subirlo a ~.60, que es practicamente --texto-2 (.62): ahi los tres niveles de la escala se vuelven dos. En Cristal Perlado el tercer nivel no puede ser a la vez "casi apagado" y legible, y entre perder el escalon o quedarse a 3 decimas del minimo, el fundador escogio conservar el escalon. Casi el doble que antes, y el nivel sigue existiendo. 🟡 En OBSIDIANA se queda en #44444e (2,07): alli lleva asi desde el primer dia, aprobado de ojo, y no es lo que el estaba mirando. */ --texto-3: rgba(11, 13, 20, .56); /* ⚠️ LA UNICA FICHA QUE NECESITA DOS VALORES DE VERDAD. El cian de la casa sobre fondo claro no se lee. Mismo tono, bajado. El NUCLEO de Nix conserva su #00F0FF en los dos modos. */ --nix-texto: #04697a; /* EL CUERPO DE NIX EN CLARO. Mismo tono bajado, igual que su texto — el porque completo y los numeros medidos estan en el juego de Obsidiana. El nucleo pasa de 1,15 a 5,52 de contraste; el halo, igual. ⚠️ Lo que NO cambia es la FORMA: sigue siendo un punto con halo que respira, con las mismas cuatro transparencias. Nix no se rediseña al cambiar de terreno; se le cambia la luz. */ --nix-nucleo: var(--nix-texto); --nix-halo-rgb: 4, 105, 122; /* El aviso del tope, del otro lado del espejo: aqui la luz no cabe y el que dice "hasta aqui" es el peso. Los numeros, en el juego oscuro. */ --tope-rgb: 9, 10, 15; --linea: rgba(9, 10, 15, .06); --borde: rgba(9, 10, 15, .12); /* El filo de luz se invierte: en el claro la luz es BLANCA y casi opaca, porque sobre un fondo claro un filo oscuro se lee como suciedad y no como brillo. */ --filo: rgba(255, 255, 255, .85); --panel: rgba(255, 255, 255, .38); --panel-solido: #ffffff; --toque: rgba(255, 255, 255, .45); /* ⚠️ AQUI EL TOQUE SE INVIERTE, y es la misma verdad de --filo dicha en otro sitio: sobre claro, blanco al 3% no es una superficie suave — no es nada. Lo que se hunde un poco es lo oscuro. Los canales NO son inventados: son los mismos 9,10,15 con los que este modo ya escribe --linea, --borde y --hundido. Cambia el tono; las cuatro transparencias de la barra se quedan como estan. */ --toque-rgb: 9, 10, 15; /* Mas saturacion que en oscuro: sobre claro el color de atras se lava antes, y sin esto el vidrio vuelve a ser papel. */ --sat: 190%; --velo: rgba(247, 250, 255, .70); --hundido: rgba(9, 10, 15, .06); --hundido-sombra: inset 0 1.5px 3px rgba(9, 10, 15, .14), inset 0 -1px 0 rgba(255, 255, 255, .90); /* Las mismas tres luces y las mismas posiciones que en Obsidiana — incluido el cuadrante superior derecho vacio— con mas cuerpo, porque sobre claro se lavan antes. */ --fondo-luz: radial-gradient(58% 40% at 14% 4%, rgba(122, 150, 255, .45), transparent 64%), radial-gradient(56% 38% at 92% 68%, rgba(122, 150, 255, .28), transparent 64%), radial-gradient(74% 44% at 40% 106%, rgba(255, 168, 110, .42), transparent 64%); /* Los alias, otra vez — apuntan a las mismas fichas y por eso cambian solos. Aqui se ve por que los nombres viejos no sobrevivian: --snow ("nieve") vale #0b0d14, que es casi negro. */ --void: var(--fondo); --void-2: var(--fondo-2); --card: var(--superficie); --snow: var(--texto); --snow-dim: var(--texto-suave); --ash: var(--texto-2); --ash-dim: var(--texto-3); --line-2: var(--linea); } /* ===================================================================== EL MOMENTO KITT — bloque F-1 Trasladado de la maqueta que el fundador aprobo (`/sistema`), no reinventado: mismo cono de luz, misma vuelta de 2,4 s. ⚠️ POR QUE VA AQUI Y NO EN UN BOTON. La idea del fundador fue montarlo en los botones "porque nos ayuda a la precarga mientras nos entretenemos con la animacion", y el argumento es correcto — pero en los botones no hay nada que precargar: WhatsApp abre otra app, el .vcf se arma en el navegador. El unico sitio de la cabina donde de verdad se espera es este: la caja donde Nix dice "Preparando tu archivo…" mientras el servidor lo genera. El KITT tapa una espera de verdad, que era el punto. ⚠️ Y AQUI GIRA MIENTRAS TRABAJA, NO "dos vueltas y se apaga" (§6). Esa regla es para el KITT como momento decorativo; este es un INDICADOR DE TRABAJO, y un indicador que se apaga solo mientras la maquina sigue trabajando miente. Es la misma ley de la casa —el cian es informacion, no adorno— y por eso el cian aqui es legal: gira exactamente mientras Nix esta haciendo algo. ⚠️ SI EL NAVEGADOR NO ENTIENDE @property, la animacion no corre y queda un arco de luz QUIETO en el borde. Se ve como un realce, no como algo roto. Es la degradacion aceptable, igual que la Caja sin motor de vuelo. ===================================================================== */ @property --kitt-giro { syntax: ""; inherits: false; initial-value: 0deg; } /* ⚠️ EL COLOR SALE A DOS FICHAS (2026-08-13), y no es cosmetica: el fundador pidio *"el efecto KITT con el naranja"* para el boton de descartar, y la unica forma de darselo sin duplicar el anillo entero —su geometria, su mascara, su giro, sus tres avisos escritos con sangre— es que lo unico que cambie sea el color. Una segunda copia de esta receta se separaria de esta en tres semanas; es literalmente lo que le acaba de pasar a la pancarta. Y de paso el cian deja de estar escrito a mano ahi abajo, que era una deuda de §0: `rgba(0,240,255,.35)` llevaba desde el principio sin ficha. */ .kitt { position: relative; --kitt-tenue: rgba(0, 240, 255, .35); --kitt-vivo: var(--nix-cyan); } /* EL KITT NARANJA. §4 manda el color y no el gusto: el naranja de esta casa es `--error`, y lo que dice es "esto no siguio adelante". Descartar no es un fallo, pero es la otra mitad de la misma decision — y en un cuadro donde el otro boton se enciende en cian, el ojo entiende en un golpe cual es cual. El cian se queda donde §4 lo tiene reservado: en el que SI llama a Nix. */ .kitt.naranja { --kitt-tenue: rgba(249, 115, 22, .35); --kitt-vivo: var(--error); } /* El borde de luz sin envolver el elemento en otro div: se pinta un cuadro completo y se recorta el centro con dos mascaras que se restan. Envolverlo habria obligado a tocar el HTML de algo que ya funciona. */ .kitt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; /* El cian de la casa, con su alfa. NO color-mix: su soporte en Android de gama media es reciente y §5 manda ahi. */ /* ⚠️⚠️ UNA SOLA PROPIEDAD EN EL `from`, Y NO SE LE SUMA NADA. Se intento poner el arranque al azar aqui —`from calc(var(--kitt-desde) + var(--kitt-giro))`— y **el degradado dejo de repintarse**: el navegador seguia animando `--kitt-giro` (medido: avanzaba de 0 a 90) pero el `from` se quedaba clavado. El anillo aparecia y no andaba. El azar entra por `animation-delay`, unas lineas abajo, que no se anima y por eso no rompe nada. *Lo que se anima y lo que se pinta tienen que ser la misma cosa.* */ background: conic-gradient(from var(--kitt-giro), transparent 0 55%, var(--kitt-tenue) 72%, var(--kitt-vivo) 84%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kittGira 2.4s linear infinite; } @keyframes kittGira { to { --kitt-giro: 360deg; } } /* LAS DOS VARIANTES, Y NO SON UN CAPRICHO — son las dos cosas distintas que el mismo dibujo puede significar: · SIN `.momento` (la caja de "Preparando tu archivo…"): gira MIENTRAS trabaja, en bucle, y lo apaga el JS al llegar la respuesta. Es un INDICADOR, y un indicador que se apaga solo mientras la maquina sigue trabajando miente. · CON `.momento` (los botones que se activan): MEDIA VUELTA Y SE APAGA, tal cual manda §6 del Design System. Aqui si es el momento decorativo, y el argumento del fundador es suyo: "un chiste muy bueno, a la tercera y quinta vez ya no da risa". ⚠️⚠️ MEDIA VUELTA, Y ES EL PRIMERO DE TRES TIEMPOS (fundador, 2026-08-07). Nacio en DOS vueltas y el mismo dia bajo a 1,5, a 1 y a 0,5, probandolo con el dedo: *"en las pruebas se siente mucho"*. Con eso el toque completo paso de 4,5 s a 2,1 s. **El KITT ya no suena solo:** gira MEDIA vuelta, se apaga, y solo entonces baja Nix a activar el boton y el boton se pone verde. Los tres iban a la vez y se estorbaban — *tres efectos buenos sonando juntos no son tres efectos, son ruido*. El orden entero, con sus guardas, esta escrito en §6 del Design System; aqui vive solo el numero. ⚠️ Y AQUI NO SE RETRASA LA ACCION POR CAPRICHO. La espera es el efecto que el fundador pidio, pero **el que espera es el show, nunca la accion**: si el anillo no existiera —movimiento reducido, un motor sin `@property`—, el boton tiene que actuar de una. Eso lo garantiza quien llama, no esta hoja. Es la leccion del 2026-07-30, cuando un vuelo en curso se tragaba el toque siguiente. */ .kitt.momento::before { animation-iteration-count: .5; } @media (prefers-reduced-motion: reduce) { .kitt::before { animation: none; } }