/* ═══════════════════════════════════════════════════════════════════════════ lux.css — CAPA DE LUJO del MasterPrompt Vault. Encargo de Diego (2026-08-12): «cajas de luz, nodos de luz respirando en movimiento, que se vea de altísima tecnología, como un sitio hecho por una empresa de 50.000 dólares, que parezca salido de Iron Man hecho por JARVIS». POR QUE ESTA HOJA EXISTE Y NO ES CSS SUELTO ─────────────────────────────────────────── El Kit Visual MR ya traía la mitad de esto y el Vault no lo estaba usando: `mr-motion.css` declara mr-aurora, mr-orb, mr-breathe, mr-sheen, mr-pulse, mr-halo y mr-float, y `mr-tokens.css` declara --mr-glow-*, la escala de elevación de 6 niveles y --mr-breathe (4500 ms medidos). Lo que faltaba no eran efectos: faltaban los COMPONENTES que los usan. Esta hoja los construye —y no inventa un valor nuevo donde el Kit ya tiene un token. LA LEY LUXE, que aquí se cumple entera (Kit, docs/UX_MOTORES.md §16): 1. Se anima SOLO opacity / transform / box-shadow / filter. Nada que provoque reflow: una animación que reflowea a 60 fps calienta el teléfono del dueño mientras lee una ficha. 2. Lo ambiental es LENTO (4-14 s). Por debajo de 3 s deja de ser ambiente y pasa a ser una distracción que compite con el texto. 3. El hover PAUSA lo ambiental. 4. `prefers-reduced-motion` lo apaga. No lo atenúa: lo apaga. 5. La luz nunca lleva información sola. Un nodo verde que respira ADEMÁS dice «Biblioteca viva» en texto; si alguien no percibe el movimiento, no pierde el dato. PRESUPUESTO DE RENDIMIENTO, medido y respetado: · Máximo 3 capas con `filter: blur()` por pantalla. El blur es lo más caro que hay en compositing; cuatro capas ya se notan en un móvil de gama media. · En ≤640px los orbes se apagan y los blur bajan a la mitad. Un teléfono con datos no está para pagar una aurora de 120px de desenfoque. · Todo lo ambiental va con `pointer-events:none` y `contain:paint`. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* La capa de lujo NO inventa colores: compone los del Kit. */ --lux-1:var(--mr-tiffany,#0ABAB5); --lux-2:var(--mr-gold,#d4af37); --lux-3:var(--mr-blue,#4361EE); --lux-vidrio:rgba(255,255,255,.055); --lux-vidrio-2:rgba(255,255,255,.09); --lux-borde:rgba(255,255,255,.10); --lux-blur:58px; --lux-dur-amb:14s; /* aurora: el ciclo más lento de la casa */ --lux-dur-orb:22s; /* orbes: aún más lento, para que no "camine" */ /* EL FILETE (v1.8). Una sola definición del degradado que separa superficies. Lo usan `.lux-barra::after`, `.lux-linea` y la cabecera del sitio en `vault.css`. Está aquí y no repetido en cada sitio porque la primera vez que alguien retoque el oro sin encontrar las otras dos copias, el sitio queda cosido a mano. */ --lux-filete:linear-gradient(90deg,transparent, color-mix(in srgb,var(--mr-tiffany,#0ABAB5) 55%,transparent) 18%, color-mix(in srgb,var(--mr-gold,#d4af37) 40%,transparent) 72%,transparent); } /* CANDADO GLOBAL: ninguna capa decorativa puede crear una barra de scroll lateral. Se mide en la auditoria responsive (6 paginas x 9 anchos, 320-1920) y aqui se ata: si mañana alguien añade un orbe mal puesto, el desborde no llega al cliente. No sustituye a medir; evita que un adorno rompa el layout. `clip` y no `hidden`: `hidden` crea contexto de scroll y rompe el `position:sticky` de la cabecera. Y va tambien en : puesto solo en el navegador NO lo propaga al viewport cuando esta en `visible`, y quedaban 2-3 px de arrastre lateral (medido en 1920). */ body.lux{overflow-x:clip} /* El ANFITRION de las capas ambientales. Es lo que evita el desborde de raiz: se recorta en el contenedor, no en el documento. Probado: poner el clip en deja la pagina SIN scroll vertical en Chrome cuando el otro eje esta en `visible` (medido: scrollTop se queda en 0 con 4.514 px de contenido). Y recortar aqui ya no produce el borde duro de antes, porque el campo lleva mascara eliptica y se apaga antes de tocar el limite. */ .lux-host{position:relative;overflow:clip} /* Los orbes NUNCA sobresalen del contenedor. Con `left:-60px` y `right:-70px` metian 57 px de desborde horizontal en 768 px (medido en la auditoria responsive): un adorno no puede crear una barra de scroll lateral. ═══ 1 · CAMPO AMBIENTAL — la luz de fondo ════════════════════════════════ Dos auroras y dos orbes que respiran fuera de fase. Es lo que hace que el fondo deje de ser un color plano y pase a leerse como un espacio con profundidad. Va DENTRO de un contenedor con position:relative + overflow clip; nunca en , para que no aparezca detrás del pie. */ .lux-campo{position:absolute;inset:-150px 0 auto 0;height:620px; pointer-events:none;z-index:0;contain:paint; /* MASCARA ELIPTICA, no rectangulo. Sin ella el resplandor se recortaba contra el borde del contenedor y se veia como una CAJA gris de bordes rectos —medido en la captura que mando Diego—. Y NO va a sangre con 100vw: eso metia 646 px de desborde horizontal (medido), que en un movil es una barra de scroll lateral. Una aurora que se puede recortar deja de ser aurora; una que rompe el layout es peor que no tenerla. */ -webkit-mask-image:radial-gradient(62% 58% at 50% 18%, #000 0%, #000 18%, transparent 72%); mask-image:radial-gradient(62% 58% at 50% 18%, #000 0%, #000 18%, transparent 72%); background: radial-gradient(52% 62% at 16% 6%, color-mix(in srgb,var(--lux-1) 42%,transparent), transparent 66%), radial-gradient(46% 58% at 86% 12%, color-mix(in srgb,var(--lux-2) 30%,transparent), transparent 64%), radial-gradient(38% 46% at 52% 0%, color-mix(in srgb,var(--lux-3) 24%,transparent), transparent 62%); filter:blur(var(--lux-blur));opacity:.85; animation:lux-aurora var(--lux-dur-amb) ease-in-out infinite;} @keyframes lux-aurora{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.72} 50% {transform:translate3d(1.5%,-2%,0) scale(1.07);opacity:.92}} .lux-orbe{position:absolute;border-radius:50%;pointer-events:none;z-index:0; filter:blur(46px);opacity:.5;contain:paint; animation:lux-orbe var(--lux-dur-orb) ease-in-out infinite;} .lux-orbe--1{width:min(340px,42vw);height:min(340px,42vw);top:-90px;left:0; background:radial-gradient(circle,color-mix(in srgb,var(--lux-1) 40%,transparent),transparent 70%)} .lux-orbe--2{width:min(260px,34vw);height:min(260px,34vw);top:40px;right:0;animation-delay:-9s; background:radial-gradient(circle,color-mix(in srgb,var(--lux-2) 34%,transparent),transparent 70%)} @keyframes lux-orbe{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 33% {transform:translate3d(4%,-5%,0) scale(1.08)} 66% {transform:translate3d(-4%,4%,0) scale(.95)}} /* Malla técnica: la retícula que da el aire de instrumento. Estática a propósito —una retícula que se mueve marea— y con máscara radial para que se desvanezca antes de tocar el texto. */ .lux-malla{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%); mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);} /* DENTRO DE UNA COLUMNA CON ANCHO MAXIMO (v1.8). La mascara de arriba esta calculada para un hero a sangre. Metida en un `.wrap` de 1.180 px la cuenta sale al reves: el radio horizontal es 70% de 1.180 = 826 px y el borde queda a 590 px del centro, o sea al 71% del radio — todavia opaco cuando el desvanecido empieza al 78%. Resultado medido en `app.html` a 1440 px: la reticula se recorta contra el limite del contenedor y se ve una CAJA rectangular con esquina dura, exactamente el defecto que ya se corrigio una vez en `.lux-campo`. Este modificador cierra la mascara antes del borde. */ .lux-malla--dentro{ -webkit-mask-image:radial-gradient(52% 62% at 50% 0%, #000 0%, #000 12%, transparent 70%); mask-image:radial-gradient(52% 62% at 50% 0%, #000 0%, #000 12%, transparent 70%);} /* Línea de escaneo: un barrido vertical lentísimo. Es el detalle que dispara el «esto es un instrumento», y es una sola capa sin blur. */ .lux-scan{position:absolute;left:0;right:0;top:0;height:180px;pointer-events:none;z-index:0; background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--lux-1) 12%,transparent) 55%, transparent); animation:lux-scan 9s cubic-bezier(.4,0,.6,1) infinite;opacity:.55} @keyframes lux-scan{0%{transform:translateY(-100%)}55%,100%{transform:translateY(560px)}} /* Todo lo que va por ENCIMA del campo necesita subir de plano. */ .lux-sobre{position:relative;z-index:1} /* ═══ 2 · NODO DE LUZ QUE RESPIRA ══════════════════════════════════════════ El indicador de «vivo». Un punto con dos halos que se expanden y se apagan, desfasados. Se usa en: biblioteca viva (home), sesión activa (app), estado del sistema (BOH) y la insignia de nivel de la ficha. */ .lux-nodo{position:relative;width:10px;height:10px;border-radius:50%;flex:none;display:inline-block; background:var(--nc,var(--mr-ok,#22c55e)); box-shadow:0 0 12px var(--nc,var(--mr-ok,#22c55e)); animation:lux-latido 2.6s ease-in-out infinite} .lux-nodo::before,.lux-nodo::after{content:"";position:absolute;inset:0;border-radius:50%; border:1.5px solid var(--nc,var(--mr-ok,#22c55e)); animation:lux-halo 2.6s cubic-bezier(.22,1,.36,1) infinite} .lux-nodo::after{animation-delay:1.3s} @keyframes lux-latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.82}} @keyframes lux-halo{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.1);opacity:0}} .lux-nodo--oro{--nc:var(--mr-gold,#d4af37)} .lux-nodo--tif{--nc:var(--mr-tiffany,#0ABAB5)} .lux-nodo--sm{width:8px;height:8px} /* ═══ 3 · CAJA DE LUZ ══════════════════════════════════════════════════════ El panel de vidrio con borde de luz. Tres capas superpuestas y ni una sola imagen: (a) el vidrio, (b) un borde en degradado hecho con mask-composite, (c) un reflejo superior de 1px que es lo que da el acabado caro. El borde en degradado se degrada con gracia: si el navegador no soporta mask-composite, queda un borde sólido normal y la caja sigue siendo caja. */ .lux-caja{position:relative;border-radius:var(--mr-r-lg,18px); background:linear-gradient(180deg,var(--lux-vidrio),rgba(255,255,255,.02) 42%,transparent), var(--mr-surface,#11151d); border:1px solid var(--lux-borde); box-shadow:var(--mr-elev-2,0 6px 18px rgba(0,0,0,.35)), inset 0 1px 0 rgba(255,255,255,.06); transition:transform var(--mr-dur-fast,260ms) var(--mr-ease,ease), box-shadow var(--mr-dur-base,400ms) var(--mr-ease,ease), border-color var(--mr-dur-fast,260ms) var(--mr-ease,ease);} .lux-caja::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(140deg, color-mix(in srgb,var(--lux-1) 55%,transparent), transparent 34%, transparent 62%, color-mix(in srgb,var(--lux-2) 42%,transparent)); opacity:.55;pointer-events:none; -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; transition:opacity var(--mr-dur-base,400ms) var(--mr-ease,ease)} .lux-caja:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16); box-shadow:var(--mr-elev-3,0 14px 40px rgba(0,0,0,.45)), 0 0 34px -12px color-mix(in srgb,var(--lux-1) 60%,transparent), inset 0 1px 0 rgba(255,255,255,.09)} .lux-caja:hover::before{opacity:1} /* Variante encendida: para la caja que manda en la pantalla. */ .lux-caja--viva::before{opacity:.9} .lux-caja--viva{box-shadow:var(--mr-elev-3,0 14px 40px rgba(0,0,0,.45)), 0 0 44px -18px color-mix(in srgb,var(--lux-1) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.08)} /* ═══ 4 · MARCO HUD — las esquinas de Iron Man ═════════════════════════════ Cuatro escuadras dibujadas con dos pseudo-elementos y bordes parciales. Decorativas al 100%: si no se ven, no se pierde ninguna información. */ .lux-hud{position:relative} .lux-hud::before,.lux-hud::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none; border-color:color-mix(in srgb,var(--lux-1) 70%,transparent);opacity:.75} .lux-hud::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid; border-top-left-radius:var(--mr-r-md,14px)} .lux-hud::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid; border-bottom-right-radius:var(--mr-r-md,14px)} .lux-hud--oro::before,.lux-hud--oro::after{border-color:color-mix(in srgb,var(--lux-2) 75%,transparent)} /* ═══ 5 · BARRIDO DE LUZ ═══════════════════════════════════════════════════ Un reflejo que cruza la superficie al pasar el puntero. Es lo que separa un botón de un botón caro. Solo en hover: en bucle sería un anuncio. */ .lux-sheen{position:relative;overflow:hidden;isolation:isolate} .lux-sheen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%); transform:translateX(-120%);transition:none} .lux-sheen:hover::after{animation:lux-sheen 900ms var(--mr-ease,ease) 1} @keyframes lux-sheen{to{transform:translateX(120%)}} /* ═══ 6 · TIPOGRAFIA DE LUJO ═══════════════════════════════════════════════ Titular con degradado y un halo mínimo. El degradado se apoya en el color del texto del Kit, así que en tema claro sigue siendo legible. */ .lux-titulo{background:linear-gradient(180deg,var(--mr-text,#eef2f7) 30%, color-mix(in srgb,var(--mr-text,#eef2f7) 62%, var(--lux-1)) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-wrap:balance} @supports not (background-clip:text){ .lux-titulo{color:var(--mr-text,#eef2f7)} } .lux-kicker{display:inline-flex;align-items:center;gap:var(--mr-sp-2); font:800 var(--mr-fs-meta,11px)/1 var(--mr-font,system-ui);letter-spacing:.14em;text-transform:uppercase; color:color-mix(in srgb,var(--lux-1) 82%, #fff);margin:0 0 var(--mr-sp-35)} .lux-kicker::after{content:"";width:44px;height:1px; background:linear-gradient(90deg,color-mix(in srgb,var(--lux-1) 70%,transparent),transparent)} /* Filete de luz: separa secciones sin meter una línea dura. */ .lux-linea{height:1px;border:0;margin:34px 0; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lux-1) 45%,transparent) 22%, color-mix(in srgb,var(--lux-2) 35%,transparent) 78%,transparent)} /* ═══ 7 · CIFRAS ═══════════════════════════════════════════════════════════ */ .lux-cifra{font-family:var(--mr-font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums; letter-spacing:-.02em} /* ═══ 8 · BARRA DE MANDO (v1.8) ════════════════════════════════════════════ La cabecera fija y las filas de pestañas. Antes cada superficie resolvía su propio borde inferior con `1px solid var(--mr-line)`: una línea gris que corta la pantalla en dos y no dice nada. Aquí el borde es un FILETE DE LUZ que nace transparente, pasa por el Tiffany y muere en el oro — el mismo gesto de `.lux-linea`, pero pegado al borde de una barra. Por qué es un componente y no tres reglas sueltas: lo usan la cabecera de las cinco páginas, las pestañas de Mi Biblioteca y los macros del BOH. Tres sitios que tienen que verse iguales o el sitio parece cosido a mano. El `backdrop-filter` NO cuenta contra el presupuesto de tres blur: no es una capa pintada con `filter:blur()` sobre un degradado grande, es un filtro de composición sobre lo que ya está detrás. Se comprueba en la auditoría. */ .lux-barra{position:relative; background:linear-gradient(180deg, color-mix(in srgb,var(--mr-bg,#0a0d13) 88%,transparent), color-mix(in srgb,var(--mr-bg,#0a0d13) 74%,transparent)); -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25); border-bottom:0} .lux-barra::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none; background:var(--lux-filete)} /* ═══ 9 · ESTADO VACIO CON PULSO (v1.8) ═══════════════════════════════════ Una caja oscura de 500 px sin nada dentro no es «vacío»: se lee como algo que no cargó. Medido en `app.html` a 1440 px — el visor ocupa media pantalla esperando un clic y no dice que espera. `.lux-vacio` la convierte en una superficie que declara que está lista: un nodo respirando, el rótulo y la instrucción. La luz no lleva el mensaje —lo lleva el texto—; la luz solo dice que hay corriente. Sirve igual en el visor de Mi Biblioteca, en «Mis descargas» sin descargas y en las tablas del BOH sin resultados. */ .lux-vacio{position:relative;display:grid;justify-items:center;align-content:center;gap:var(--mr-sp-3); text-align:center;padding:clamp(28px,6vw,56px) clamp(18px,4vw,34px);min-height:220px} .lux-vacio::before{content:"";position:absolute;inset:14px;border-radius:var(--mr-r-lg,18px); pointer-events:none;border:1px dashed color-mix(in srgb,var(--lux-1) 22%,transparent)} .lux-vacio__aro{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle,color-mix(in srgb,var(--lux-1) 16%,transparent),transparent 70%); border:1px solid color-mix(in srgb,var(--lux-1) 28%,transparent)} .lux-vacio h2,.lux-vacio h3,.lux-vacio p{margin:0;max-width:46ch} .lux-vacio p{color:var(--mr-text-2,#9aa3b2);font-size:var(--mr-fs-body,14.5px);line-height:var(--mr-lh-body,1.6)} /* ═══ 10 · REALCE DE FILA (v1.8) ═══════════════════════════════════════════ Lo seleccionado tiene que verse seleccionado desde el otro lado de la mesa. Un cambio de fondo de dos tonos no basta en un móvil a plena luz: aquí el realce suma un carril de luz a la izquierda y un resplandor interior atado al color de la categoría (`--mc`), que ya existe en el Vault. Va con `aria-selected` / `aria-pressed`, no con una clase propia: el estado ya está en el DOM por accesibilidad y duplicarlo es una fuente de mentiras. */ .lux-realce{position:relative} /* `--lux-realce-0` es el reposo. En 0 la fila no muestra carril hasta que se elige (tablas del BOH). Por encima de 0 el carril esta siempre —apagado— y ahi puede llevar el color de la categoria, que SI es informacion: la lista de Mi Biblioteca lo pone a .5 y sustituye con el su antiguo `border-left`. */ .lux-realce::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px; pointer-events:none;opacity:var(--lux-realce-0,0);transform:scaleY(.55);transform-origin:center; background:linear-gradient(180deg,var(--mc,var(--lux-1)),color-mix(in srgb,var(--mc,var(--lux-1)) 30%,transparent)); box-shadow:0 0 14px color-mix(in srgb,var(--mc,var(--lux-1)) 70%,transparent); transition:opacity var(--mr-dur-fast,260ms) var(--mr-ease,ease), transform var(--mr-dur-fast,260ms) var(--mr-ease,ease)} .lux-realce[aria-selected="true"]::before,.lux-realce[aria-pressed="true"]::before{opacity:1;transform:scaleY(1)} .lux-realce[aria-selected="true"],.lux-realce[aria-pressed="true"]{ box-shadow:inset 0 0 26px -14px color-mix(in srgb,var(--mc,var(--lux-1)) 90%,transparent), var(--mr-elev-2,0 6px 18px rgba(0,0,0,.35))} /* ═══ 11 · FOCO VISIBLE — accesibilidad, no adorno ══════════════════════════ Un anillo de foco que se ve sobre cualquier superficie de la casa. Antes cada componente resolvía el suyo; aquí hay uno solo y siempre visible. */ .lux :focus-visible, a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid color-mix(in srgb,var(--lux-1) 85%,#fff); outline-offset:2px;border-radius:var(--mr-r-xs,6px)} /* ═══ 12 · PRESUPUESTO DE RENDIMIENTO Y ACCESIBILIDAD ═══════════════════════ */ @media (max-width:640px){ :root{--lux-blur:34px} .lux-orbe{display:none} /* dos capas de blur menos en el móvil */ .lux-scan{display:none} .lux-malla{background-size:44px 44px;opacity:.35} .lux-campo{height:460px;inset:-110px 0 auto 0} .lux-hud::before,.lux-hud::after{width:13px;height:13px} } /* Puntero grueso: el hover no existe, así que el barrido y el levantamiento sobran. Y el área táctil manda: 44px es el mínimo, no una sugerencia. */ @media (pointer:coarse){ .lux-sheen:hover::after{animation:none} .lux-caja:hover{transform:none} .lux-tap{min-height:44px;min-width:44px} } /* Hover pausa lo ambiental (ley LUXE 3). */ .lux-campo:hover,.lux-orbe:hover{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .lux-campo,.lux-orbe,.lux-scan{animation:none!important} .lux-scan{display:none!important} .lux-nodo,.lux-nodo::before,.lux-nodo::after{animation:none!important} .lux-nodo::before,.lux-nodo::after{display:none!important} .lux-sheen::after{display:none!important} } /* Tema claro del Kit: el vidrio se invierte o la caja se vuelve un borrón. */ [data-mr-theme="light"]{ --lux-vidrio:rgba(0,0,0,.035);--lux-vidrio-2:rgba(0,0,0,.06);--lux-borde:rgba(0,0,0,.10); }