/* 1.13.0 · CAPA FX NEÓN (capas/fx_neon.css): tres pasadas gráficas y tres tandas de interactividad · regla R-FX.
   En su propia etiqueta, después del estilo base: manda sobre él y el publicador la sirve como archivo en los ejemplos. */
:root{
--nx-o:#FF6B00; --nx-o2:#FF9A3D; --nx-t:#0ABAB5; --nx-t2:#5fd9d5; --nx-l:#C2FF3D; --nx-r:#FF5A4E;
--nx-glow-o:0 0 6px rgba(255,107,0,.55),0 0 22px rgba(255,107,0,.28);
--nx-glow-t:0 0 6px rgba(10,186,181,.6),0 0 22px rgba(10,186,181,.3);
--nx-ease:cubic-bezier(.22,1,.36,1);
}
@property --nx-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --nx-p{syntax:"<percentage>";initial-value:0%;inherits:false}
.nx-lienzo{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.nx-lienzo.on{opacity:1}
.progreso{height:3px;background:linear-gradient(90deg,var(--nx-o),var(--nx-o2),var(--nx-t),var(--nx-l),var(--nx-o));background-size:300% 100%;
box-shadow:0 0 10px rgba(255,107,0,.7),0 0 24px rgba(10,186,181,.35);animation:nxFluye 6s linear infinite}
@keyframes nxFluye{to{background-position:-300% 0}}
main section{position:relative;border-top-color:transparent}
main section::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,107,0,.35) 20%,rgba(10,186,181,.35) 80%,transparent),
linear-gradient(90deg,transparent 0,rgba(255,255,255,.95) 50%,transparent 100%);
background-size:100% 100%,18% 100%;background-repeat:no-repeat;background-position:0 0,-30% 0}
main section.nx-on::before{animation:nxPulso 2.4s var(--nx-ease) .1s 1 both}
@keyframes nxPulso{to{background-position:0 0,130% 0}}
main h2::after{height:3px;max-width:180px;box-shadow:var(--nx-glow-o);background:linear-gradient(90deg,var(--nx-o),var(--nx-o2),var(--nx-t),var(--nx-o));background-size:300% 100%;
transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--nx-ease) .15s}
main section.nx-on h2::after{transform:scaleX(1)}
.eyebrow .nx-n{display:inline-flex;align-items:center;gap:7px;margin-right:10px;padding:2px 9px;border-radius:999px;border:1px solid rgba(255,154,61,.45);
color:var(--nx-o2);font-variant-numeric:tabular-nums;letter-spacing:.12em;box-shadow:inset 0 0 10px rgba(255,107,0,.12)}
.eyebrow .nx-n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--nx-t2);box-shadow:var(--nx-glow-t);animation:nxPiloto 2.6s ease-in-out infinite}
@keyframes nxPiloto{0%,100%{opacity:.45}50%{opacity:1}}
.nx-borde{position:relative;isolation:isolate}
.nx-borde::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
background:conic-gradient(from 210deg,var(--nx-o2) 0 var(--nx-p),transparent var(--nx-p) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.0;transition:opacity .6s}
.nx-borde.nx-v::after{animation:nxTraza 1.5s var(--nx-ease) var(--nx-d,0ms) 1 both}
@keyframes nxTraza{0%{--nx-p:0%;opacity:.95}70%{--nx-p:100%;opacity:.85}100%{--nx-p:100%;opacity:.28}}
.nx-borde:hover::after{opacity:.9;background:conic-gradient(from var(--nx-a),var(--nx-o2),var(--nx-t2),transparent 45%,var(--nx-o2));animation:nxGira 3.2s linear infinite}
@keyframes nxGira{to{--nx-a:360deg}}
.portada h1 em{text-shadow:0 0 18px rgba(255,107,0,.45),0 0 46px rgba(255,107,0,.22);animation:nxRespira 5.5s ease-in-out infinite}
@keyframes nxRespira{0%,100%{text-shadow:0 0 14px rgba(255,107,0,.35),0 0 38px rgba(255,107,0,.16)}50%{text-shadow:0 0 22px rgba(255,107,0,.65),0 0 60px rgba(255,107,0,.3)}}
.kpi .v{text-shadow:0 0 22px currentColor}
.kpi .v small{text-shadow:none}
.nx-rv{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px);transition:opacity .8s var(--nx-ease),transform .9s var(--nx-ease),filter .8s var(--nx-ease);transition-delay:var(--nx-d,0ms)}
.nx-rv.nx-v{opacity:1;transform:none;filter:none}
.tbar i,.ob i,.nx-barra{position:relative;overflow:hidden}
.tbar i::after,.ob i::after,.nx-barra::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
background-size:40% 100%;background-repeat:no-repeat;background-position:-60% 0;animation:nxCorre 3.8s ease-in-out 1.2s infinite}
@keyframes nxCorre{0%,55%{background-position:-60% 0}100%{background-position:160% 0}}
@media(hover:hover) and (pointer:fine){
.nx-foco{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,154,61,.10),transparent 42%)}
.nx-foco:hover{border-color:rgba(255,154,61,.45)}
.nx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .35s var(--nx-ease)}
}
.mx svg .nx-anillo{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:nxAnillo 2.4s ease-out infinite}
@keyframes nxAnillo{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.mx svg line{stroke-dasharray:1200;stroke-dashoffset:1200}
section.nx-on .mx svg line{animation:nxTraza2 1.6s var(--nx-ease) forwards}
@keyframes nxTraza2{to{stroke-dashoffset:0}}
.gantt .gt>i{transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--nx-ease);transition-delay:var(--nx-d,0ms);box-shadow:0 0 12px rgba(255,255,255,.16)}
section.nx-on .gantt .gt>i{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.btn{transition:transform .25s var(--nx-ease),box-shadow .25s,border-color .2s}.btn:hover{box-shadow:var(--nx-glow-o)}}
.cajon-in{box-shadow:-30px 0 80px rgba(0,0,0,.6),-1px 0 0 rgba(255,154,61,.6),-8px 0 30px rgba(255,107,0,.18)}
.cajon.abierto .cb>*{animation:nxEntra .5s var(--nx-ease) both}
.cajon.abierto .cb>*:nth-child(2){animation-delay:.05s}.cajon.abierto .cb>*:nth-child(3){animation-delay:.1s}.cajon.abierto .cb>*:nth-child(n+4){animation-delay:.15s}
@keyframes nxEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nx-dock{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:70;width:58px;height:58px;border-radius:50%;
border:1px solid rgba(255,154,61,.4);background:rgba(10,10,11,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--tx);cursor:pointer;
display:grid;place-items:center;padding:0;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 18px rgba(255,107,0,.18);opacity:0;transform:translateY(20px) scale(.9);transition:opacity .4s,transform .4s var(--nx-ease)}
.nx-dock.on{opacity:1;transform:none}
.nx-dock svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:rotate(-90deg)}
.nx-dock circle{fill:none;stroke-width:3}
.nx-dock .f{stroke:rgba(247,244,239,.1)}
.nx-dock .p{stroke:url(#fxDockG);stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,107,0,.8))}
.nx-dock b{position:relative;font-family:var(--fl);font-size:.78rem;font-weight:700;letter-spacing:.04em;line-height:1.05;text-align:center}
.nx-dock b small{display:block;font-size:.75rem;font-weight:600;color:var(--txd)}
:focus-visible{outline-color:var(--nx-o2)!important;box-shadow:var(--nx-glow-o)}
.nx-plegado{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;mask-image:linear-gradient(#000 55%,transparent);-webkit-mask-image:linear-gradient(#000 55%,transparent)}
.nx-mas{display:inline-flex;align-items:center;gap:8px;margin-top:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--nx-o2);cursor:pointer;
font-family:var(--fl);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nx-mas::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.nx-mas[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.nx-mas:hover{text-shadow:var(--nx-glow-o)}
@media(hover:hover) and (pointer:fine){.nx-mas{min-height:28px;margin-top:2px}.meta.nx-chips span{padding:3px 10px}}
.kpi .k.nx-k{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.meta.nx-chips{gap:8px}
.meta.nx-chips span{padding:4px 11px;border-radius:999px;border:1px solid var(--bd2);background:rgba(247,244,239,.035)}
.nx-tip{position:fixed;left:0;top:0;z-index:95;max-width:280px;padding:9px 12px;border-radius:10px;pointer-events:none;
background:rgba(14,12,10,.94);border:1px solid rgba(255,154,61,.5);box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 16px rgba(255,107,0,.2);
font-size:.82rem;line-height:1.35;color:var(--tx);opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s}
.nx-tip.on{opacity:1;transform:none}
.nx-tip em{display:block;font-style:normal;font-family:var(--fl);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--nx-t2);margin-top:4px}
.nx-par{outline:2px solid var(--nx-o2)!important;outline-offset:2px;box-shadow:var(--nx-glow-o)!important}
circle.nx-par,g.nx-par circle{stroke:#fff!important;stroke-width:3!important;filter:drop-shadow(0 0 8px rgba(255,154,61,.95))}
.nx-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.nx-filtros button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--bd2);background:rgba(247,244,239,.04);color:var(--txd);cursor:pointer;
font-family:var(--fl);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:all .25s var(--nx-ease)}
.nx-filtros button i{width:10px;height:10px;border-radius:50%;display:inline-block}
.nx-filtros button b{font-family:var(--fh);font-weight:400;font-size:1.05rem;letter-spacing:.02em;color:var(--tx)}
.nx-filtros button[aria-pressed="true"]{color:#0A0A0B;background:var(--nx-o2);border-color:var(--nx-o2);box-shadow:var(--nx-glow-o)}
.nx-filtros button[aria-pressed="true"] b{color:#0A0A0B}
.nx-tenue{opacity:.16!important;filter:saturate(.2)}
[data-nx-f]{transition:opacity .35s,filter .35s}
.gantt{position:relative}
.nx-cursor{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(95,217,213,.8);pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}
.nx-cursor span{position:absolute;top:-2px;left:6px;white-space:nowrap;font-family:var(--fl);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0A0A0B;background:var(--nx-t2);padding:2px 7px;border-radius:6px;box-shadow:var(--nx-glow-t)}
.gantt:hover .nx-cursor{opacity:1}
.gr{transition:background .2s}
.gr:hover{background:rgba(10,186,181,.06)}
.t th.nx-ord{cursor:pointer;user-select:none;white-space:nowrap}
.t th.nx-ord::after{content:"↕";margin-left:6px;opacity:.4}
.t th.nx-ord[aria-sort="ascending"]::after{content:"↑";opacity:1;color:var(--nx-o2)}
.t th.nx-ord[aria-sort="descending"]::after{content:"↓";opacity:1;color:var(--nx-o2)}
.t th.nx-ord:hover{color:var(--tx)}
.nx-donut{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin:0 0 16px}
.nx-donut svg{width:96px;height:96px;flex:none;transform:rotate(-90deg)}
.nx-donut circle{fill:none;stroke-width:12;transition:stroke-dasharray 1.2s var(--nx-ease)}
.nx-donut .tot{font-family:var(--fh);font-size:2.2rem;line-height:1}
.nx-donut .tot small{display:block;font-family:var(--fl);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txd)}
.nx-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.nx-nav button{min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--bd);background:rgba(255,107,0,.08);color:var(--tx);font-size:1.1rem;cursor:pointer}
.nx-nav button:hover{box-shadow:var(--nx-glow-o)}
.nx-nav button[disabled]{opacity:.3;cursor:default;box-shadow:none}
.nx-nav span{font-family:var(--fl);font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--txd);font-variant-numeric:tabular-nums;white-space:nowrap}
.cajon header{flex-wrap:wrap}
.nx-comp{display:grid;gap:8px;padding:14px 16px;border:1px solid rgba(255,154,61,.35);border-radius:14px;background:linear-gradient(180deg,rgba(255,107,0,.08),transparent)}
.nx-comp .fr{display:grid;grid-template-columns:minmax(0,120px) 1fr auto;gap:10px;align-items:center;font-size:.82rem;color:var(--txd)}
.nx-comp .fr i{display:block;height:12px;border-radius:6px;background:rgba(247,244,239,.06);overflow:hidden}
.nx-comp .fr b{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#7d776e,#B0ABA2);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s var(--nx-ease)}
.nx-comp .fr.p b{background:linear-gradient(90deg,var(--nx-o),var(--nx-o2));box-shadow:var(--nx-glow-o);transition-delay:.15s}
.nx-comp.on .fr b{transform:scaleX(1)}
.nx-comp .fr em{font-style:normal;font-family:var(--fh);font-size:1.15rem;color:var(--tx);font-variant-numeric:tabular-nums}
.nx-comp .fd{font-family:var(--fl);font-weight:700;font-size:.8rem;letter-spacing:.08em;color:var(--txd)}
.nx-comp .fd.up{color:var(--nx-l)} .nx-comp .fd.down{color:var(--nx-t2)}
.nx-explora{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:var(--nx-t2);letter-spacing:.12em}
.nx-explora::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;box-shadow:var(--nx-glow-t)}
.nx-ayuda{position:fixed;left:50%;bottom:24px;z-index:96;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:14px;
background:rgba(14,12,10,.95);border:1px solid rgba(10,186,181,.5);box-shadow:var(--nx-glow-t);font-size:.86rem;color:var(--txd);transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px)}
.nx-ayuda.on{opacity:1;transform:translate(-50%,0)}
.nx-ayuda kbd{font-family:var(--fl);font-weight:700;color:var(--tx);border:1px solid var(--bd2);border-radius:6px;padding:1px 7px;margin:0 3px}
@media(max-width:640px){
.nx-dock{width:52px;height:52px}
.nx-nav{width:100%;justify-content:space-between;margin-left:0}
.nx-donut svg{width:80px;height:80px}
}
@media(prefers-reduced-motion:reduce){
.progreso,.eyebrow .nx-n::before,.portada h1 em,.tbar i::after,.ob i::after,.nx-barra::after,.mx svg .nx-anillo,.nx-borde:hover::after,.cajon.abierto .cb>*{animation:none!important}
.nx-rv,.nx-rv.nx-v{opacity:1;transform:none;filter:none;transition:none}
main h2::after,.gantt .gt>i{transform:none;transition:none}
.mx svg line,section.nx-on .mx svg line{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
.nx-borde.nx-v::after{animation:none;opacity:.28;--nx-p:100%}
main section.nx-on::before{animation:none}
.nx-lienzo{transition:none}
.nx-tilt{transform:none!important}
.nx-comp .fr b{transform:none;transition:none}
}
@media print{
.nx-lienzo,.nx-dock,.nx-tip,.nx-ayuda,.nx-mas,.nx-filtros,.nx-cursor,.nx-nav,.nx-explora,.mx svg .nx-anillo{display:none!important}
.nx-plegado,.kpi .k.nx-k{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;mask-image:none!important;-webkit-mask-image:none!important}
.nx-rv{opacity:1!important;transform:none!important;filter:none!important}
.nx-tenue{opacity:1!important;filter:none!important}
main h2::after,.gantt .gt>i{transform:none!important}
.mx svg line{stroke-dashoffset:0!important}
.nx-borde::after,main section::before{display:none!important}
}
