/* Superposición sin alterar dimensiones, contenido ni desplazamiento. */
#tension-button-template,#btn-tension[hidden]{display:none!important;}
.tension-btn{flex:0 0 auto;border-color:rgba(213,77,91,.55);background:rgba(144,26,48,.12);}
.tension-btn.is-active{color:#fff;border-color:#f04c63;background:rgba(167,29,48,.45);box-shadow:0 0 14px rgba(208,40,70,.35);}
.tension-btn:disabled{cursor:wait;opacity:.6;}
.tension-layer{--tension-color:238,32,74;position:absolute;inset:0;z-index:90;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;contain:layout paint;transition:opacity .8s ease,visibility 0s .8s;}
.tension-layer.is-active{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s;}
#app.tension-active .main{background:#0e0611;color:#f5eff3;--text:#f5eff3;--text-muted:#c2b5c2;--text-faint:#a395a5;--surface:#160e19;--surface-2:#211522;--surface-3:#332233;--bubble-bg:rgba(29,19,32,.92);--bubble-bg-mine:rgba(48,24,38,.95);--border:rgba(243,169,186,.14);}
.tension-shade,.tension-glow,.tension-beam,.tension-signal,.tension-smoke,.tension-tunnel{position:absolute;inset:0;}
.tension-shade{background:radial-gradient(ellipse at 50% 47%,transparent 12%,rgba(15,0,12,.28) 48%,rgba(0,0,0,.86) 100%);box-shadow:inset 0 0 100px rgba(var(--tension-color),.48);}
.tension-glow{background:radial-gradient(ellipse at 15% 80%,rgba(var(--tension-color),.62),transparent 62%),radial-gradient(ellipse at 90% 20%,rgba(var(--tension-color),.45),transparent 58%);animation:tensionBreathe 4.8s ease-in-out infinite;}
.tension-vortex{position:absolute;left:50%;top:47%;width:160vmax;height:160vmax;max-width:none;overflow:visible;opacity:.66;color:rgb(var(--tension-color));transform:translate(-50%,-50%);animation:tensionVortex 1.2s linear infinite;}
.tension-vortex path{display:none;}
.tension-vortex .spiral-outer:nth-child(1),.tension-vortex .spiral-outer:nth-child(7){display:block;}
.tension-vortex .spiral-inner{stroke:#ac73ca;opacity:.55;stroke-width:16;}
.tension-vortex .spiral-outer{stroke:currentColor;opacity:.5;stroke-width:58;}
.tension-tunnel i{position:absolute;left:50%;top:47%;width:60vmax;height:60vmax;border:3px solid rgba(var(--tension-color),.38);border-radius:45%;box-shadow:0 0 44px rgba(var(--tension-color),.24),inset 0 0 44px rgba(var(--tension-color),.2);animation:tensionTunnel 8s ease-in-out infinite;}
.tension-tunnel i:nth-child(2){width:90vmax;height:90vmax;animation-direction:reverse;}
.tension-tunnel i:nth-child(3){width:125vmax;height:125vmax;animation-duration:12s;}
.tension-beam{background:conic-gradient(from 0deg at 50% 47%,transparent 0deg,rgba(var(--tension-color),.28) 40deg,transparent 75deg,transparent 160deg,rgba(var(--tension-color),.25) 200deg,transparent 240deg);animation:tensionOrbit 2.4s linear infinite;}
.tension-signal{display:none;}
.tension-smoke i{position:absolute;left:-30%;bottom:-40%;width:100%;height:95%;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--tension-color),.27),transparent 65%);animation:tensionSmoke 13s ease-in-out infinite;}
.tension-smoke i:nth-child(2){left:45%;bottom:10%;animation-direction:reverse;animation-duration:19s;}
.tension-smoke i:nth-child(3){left:-15%;bottom:45%;width:130%;animation-duration:23s;}
.tension-caption{position:absolute;left:6%;right:6%;top:39%;text-align:center;color:#f5c6d2;font-family:var(--font-display,'Inter',sans-serif);font-size:clamp(14px,2.5vw,28px);font-weight:700;letter-spacing:.34em;text-shadow:0 3px 8px #000,0 0 32px rgba(var(--tension-color),.8);padding:24px 8px;background:radial-gradient(ellipse,rgba(10,0,12,.82),transparent 75%);}
.tension-caption span{display:block;margin-top:10px;color:#fff0f3;font-size:clamp(27px,5.6vw,72px);font-weight:900;letter-spacing:.06em;line-height:1.12;}
.tension-caption i{display:block;width:70%;max-width:500px;height:3px;margin:22px auto 0;background:linear-gradient(90deg,transparent,rgba(var(--tension-color),1),transparent);box-shadow:0 0 25px rgba(var(--tension-color),.75);}
.effect-pulse .tension-vortex{animation-duration:1.2s;}
.effect-blackout{--tension-color:122,63,192;}
.effect-blackout .tension-vortex{animation-direction:reverse;animation-duration:1.4s;opacity:.5;}
.effect-blackout .tension-shade{background:radial-gradient(ellipse at 50% 47%,rgba(0,0,0,.68) 8%,transparent 28%,rgba(5,0,18,.85) 90%);}
.effect-blackout .tension-tunnel i{border-radius:50%;border-width:12px;animation-duration:10s;}
.effect-blackout .tension-glow{animation-duration:7s;}
.effect-signal{--tension-color:210,44,148;}
.effect-signal .tension-vortex{animation-name:tensionWarp;animation-duration:1.4s;opacity:.55;}
.effect-signal .tension-tunnel i{border-radius:12%;border-width:5px;}
.effect-signal .tension-signal{display:block;background:repeating-linear-gradient(0deg,transparent 0,transparent 48px,rgba(146,43,114,.17) 49px,rgba(146,43,114,.17) 58px,transparent 59px);animation:tensionScan 8s ease-in-out infinite;}
.effect-spotlight{--tension-color:226,83,31;}
.effect-spotlight .tension-vortex{opacity:.38;animation-direction:reverse;animation-duration:1.3s;}
.effect-spotlight .tension-beam{opacity:1;background:conic-gradient(from 0deg at 50% 47%,transparent,rgba(172,58,31,.5) 45deg,transparent 80deg,transparent 135deg,rgba(172,58,31,.4) 180deg,transparent 220deg,transparent 290deg,rgba(172,58,31,.4) 330deg,transparent);animation-duration:2.4s;}
.tension-layer.is-active *{animation-delay:var(--tension-delay,0s);}
.tension-blast{position:absolute;inset:0;width:100%;height:100%;z-index:160;pointer-events:none;}
.tension-fragments{position:absolute;inset:0;z-index:161;overflow:hidden;pointer-events:none;perspective:1100px;contain:layout paint;--text:#f5eff3;--text-muted:#c2b5c2;--surface:#160e19;--surface-2:#211522;--bubble-bg:rgba(29,19,32,.96);--bubble-bg-mine:rgba(48,24,38,.98);}
.tension-fragment{position:absolute;overflow:hidden;pointer-events:none;transform-origin:center;contain:layout paint;border:1px solid rgba(255,140,93,.6);box-shadow:0 0 25px rgba(235,67,34,.5);animation:tensionFragment 2.4s cubic-bezier(.16,.72,.25,1) both;will-change:transform,opacity;}
#app.tension-exploding>.main,#app.tension-exploding>header,#app.tension-exploding>#sidebar-right{visibility:hidden;}
@keyframes tensionBreathe{0%,100%{opacity:.48;transform:scale(1)}50%{opacity:.95;transform:scale(1.18)}}
@keyframes tensionVortex{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes tensionWarp{0%{transform:translate(-50%,-50%) rotate(0deg) scale(1,.84)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(.84,1.12)}100%{transform:translate(-50%,-50%) rotate(360deg) scale(1,.84)}}
@keyframes tensionTunnel{0%,100%{transform:translate(-50%,-50%) rotate(-14deg) scale(.55);opacity:.35}50%{transform:translate(-50%,-50%) rotate(14deg) scale(1.15);opacity:.8}}
@keyframes tensionOrbit{to{transform:rotate(360deg)}}
@keyframes tensionSmoke{0%,100%{transform:translate(-8%,8%) scale(.9)}50%{transform:translate(18%,-18%) scale(1.25)}}
@keyframes tensionScan{0%,100%{transform:translateY(-8%)}50%{transform:translateY(8%)}}
@keyframes tensionFragment{0%{transform:translate3d(0,0,0) scale(1);opacity:1}8%{transform:translate3d(0,0,-80px) scale(.97);opacity:1}65%{opacity:1}100%{transform:translate3d(var(--fragment-x),var(--fragment-y),180px) rotate(var(--fragment-turn)) rotateY(var(--fragment-tilt)) scale(.72);opacity:0}}
@media(max-width:620px){.tension-caption{left:2%;right:2%;top:38%;letter-spacing:.2em}.tension-caption span{font-size:clamp(24px,7.5vw,42px);letter-spacing:.02em}.tension-vortex{width:145vmax;height:145vmax}}
@media(prefers-reduced-motion:reduce){.tension-layer *{animation:none!important;}.tension-vortex{transform:translate(-50%,-50%);opacity:.3}.tension-tunnel i{transform:translate(-50%,-50%);opacity:.4}.tension-glow{opacity:.6}.tension-fragment{animation:none!important;}}

/* v14.161: destellos violentos en TODOS los efectos de tensión. Ráfagas de 3 golpes cada 1,5 s (máx. 3 destellos por segundo, límite WCAG) + temblor. */
.tension-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:#fff;animation:tensionFlash 1.5s linear infinite;}
@keyframes tensionFlash{
0%{opacity:0;background:#fff}.4%{opacity:.95;background:#fff}3%{opacity:.75;background:#ff2646}8%{opacity:0}
20%{opacity:0;background:#fff}20.4%{opacity:.95;background:#fff}23%{opacity:.75;background:#ff2646}28%{opacity:0}
40%{opacity:0;background:#fff}40.4%{opacity:.95;background:#fff}43%{opacity:.75;background:#ff2646}48%{opacity:0}
100%{opacity:0}}
#app.tension-active>.main,#app.tension-active>header,#app.tension-active>#sidebar-right{animation:tensionShake 1.5s linear infinite;animation-delay:var(--tension-shake-delay,0s);}
@keyframes tensionShake{
0%{translate:-9px 4px}1.4%{translate:8px -5px}2.8%{translate:-5px 3px}4.5%{translate:0 0}
20%{translate:8px -4px}21.4%{translate:-9px 5px}22.8%{translate:5px -3px}24.5%{translate:0 0}
40%{translate:-8px -4px}41.4%{translate:9px 5px}42.8%{translate:-4px -3px}44.5%{translate:0 0}
100%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.tension-flash{display:none!important}#app.tension-active>.main,#app.tension-active>header,#app.tension-active>#sidebar-right{animation:none!important}}

/* v14.161: explosión por esquirlas. El chat se congela, se agrieta y revienta. */
.tension-blast-front{z-index:162;}
#app.tension-exploding{background:#07030b !important;}
#app.tension-exploding .tension-layer{transition:opacity .3s ease,visibility 0s .3s;}
.tension-fragments.is-quake{animation:tensionQuake .38s linear;}
.tension-shard{position:absolute;pointer-events:none;transform-origin:center;will-change:transform,opacity;}
.tension-shard-clip{position:absolute;inset:0;overflow:hidden;}
.tension-shard-edge{position:absolute;left:0;top:0;opacity:0;pointer-events:none;overflow:visible;}
.tension-shard-edge polygon{fill:none;stroke:rgba(255,190,140,.95);stroke-width:2.2;stroke-linejoin:round;}
@keyframes tensionQuake{0%{translate:0 0}10%{translate:-3px 2px}20%{translate:3px -2px}30%{translate:-2px -3px}40%{translate:4px 1px}50%{translate:-4px 2px}60%{translate:2px -3px}70%{translate:-3px 1px}80%{translate:3px 3px}90%{translate:-2px -1px}100%{translate:0 0}}
#app.tension-return>.main,#app.tension-return>header,#app.tension-return>#sidebar-right{animation:tensionReturn .7s ease-out both;}
@keyframes tensionReturn{from{opacity:0;filter:brightness(2.4)}to{opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){.tension-fragments.is-quake{animation:none}#app.tension-return>.main,#app.tension-return>header,#app.tension-return>#sidebar-right{animation:none}}