/* ══════════════════════════════════════════════════════════════════════════
 * POWER ADMIN · ALFA 2.0 · SKIN GLOBAL «CYBER-MECA»            (Ronda 87)
 * ──────────────────────────────────────────────────────────────────────────
 * Extiende a TODA la app la estética que nació en el login (power-energy.css,
 * R84–R86): vidrio carmesí biselado, bordes neón multicapa, placas
 * chaflanadas cyber-meca, micro-glitch de una sola pasada y fondo cinemático.
 *
 * REGLAS DE ESTA HOJA
 *   · Va DESPUÉS de power-ui.css (y de power-skins.css en perfil): gana por
 *     orden con la misma especificidad; `!important` sólo donde power-ui ya
 *     lo usa. power-ui.css NO se toca (prohibición vigente).
 *   · Estrictamente estética: cero IDs nuevos, cero cambios de markup, cero
 *     `display`/`position` sobre nodos con lógica. El canvas 2D del hábitat
 *     (11:6) y sus contenedores .pet-* / #companion* no se tocan.
 *   · Consciente de la skin equipada: todo color sale de --pa-accent =
 *     --skin-accent-fx (skins) → --power-accent (acentos) → carmesí Power.
 *     Violeta, glitch, gold, cobalto o café reciben la MISMA estructura
 *     cyber-meca en su propio acento.
 *   · Rendimiento: en bucle sólo transform / opacity / filter y la variable
 *     registrada --pa-ang. Sin `will-change` (presupuesto GPU 14/14 en
 *     perfil, r69). Ningún ciclo por debajo de 2.4 s (WCAG 2.3.1).
 *   · Los valores de los modales son los que r69 certifica (vidrio
 *     rgba(12,12,18,.85), blur 16, borde 44 %, halo 0 0 25px 25 %, bisel,
 *     dos radiales): aquí sólo se les suma hairline y ticks.
 * ════════════════════════════════════════════════════════════════════════ */
@property --pa-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --pa-accent: var(--skin-accent-fx, var(--power-accent, #FF1E27));
  --pa-neon: color-mix(in srgb, var(--pa-accent) 82%, #fff);
  --pa-ember: color-mix(in srgb, var(--pa-accent) 60%, #ffb3ad);
  --pa-deep: color-mix(in srgb, var(--pa-accent) 55%, #000);
  --pa-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --pa-glass-hi: rgba(255, 255, 255, 0.07);
  --pa-cut: 9px;
}

/* ── KEYFRAMES ─────────────────────────────────────────────────────────── */
@keyframes pa-orbit { to { --pa-ang: 360deg; } }
@keyframes pa-glitch {
  0%   { transform: translate3d(-2px, 0, 0) skewX(-4deg); filter: brightness(1.6) saturate(1.3); }
  18%  { transform: translate3d(2px, -1px, 0) skewX(3deg); filter: brightness(0.85); }
  36%  { transform: translate3d(-1px, 1px, 0); filter: brightness(1.45); }
  54%  { transform: translate3d(1px, 0, 0); filter: brightness(1); }
  72%  { transform: translate3d(0, 0, 0); filter: brightness(1.25); }
  100% { transform: translate3d(0, 0, 0); filter: brightness(1); }
}
@keyframes pa-flash { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
@keyframes pa-bar-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes pa-aura { 0%, 100% { opacity: 0.35; transform: scale(0.94); } 50% { opacity: 0.9; transform: scale(1.08); } }
/* La batería de la esquina: glitch de 300 ms (0–3 %) cada 11 s; el resto del
   tiempo está quieta y limpia. */
@keyframes pa-brand-glitch {
  0%    { transform: translate3d(0, 0, 0); opacity: 1; }
  0.6%  { transform: translate3d(-2px, 1px, 0) skewX(-8deg); opacity: 0.7; }
  1.2%  { transform: translate3d(2px, -1px, 0) skewX(6deg); opacity: 1; }
  1.8%  { transform: translate3d(-1px, 0, 0); opacity: 0.85; }
  2.4%  { transform: translate3d(1px, 1px, 0) skewX(-3deg); opacity: 1; }
  3%    { transform: translate3d(0, 0, 0); opacity: 1; }
  100%  { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * A · FONDO ATMOSFÉRICO · «DENTRO DEL RAYO»                    (R88 → R89)
 * La atmósfera del login llevada a toda la app: oscuridad roja cinemática,
 * pulsos de rayo suaves y niebla sutil. SIN PATRONES DE RED: en R89 se
 * eliminó la capa de estática (scanlines + grano de puntos) — era una
 * cuadrícula fina y su rodado en pasos + parpadeo era, literalmente, el
 * «flicker» del PWA. Quedan cuatro capas fijas, cero nodos nuevos, SIN
 * mix-blend-mode (los modos de fusión obligan a superficies de render en
 * cada frame) y sólo transform / opacity en bucle:
 *   html::before   NEBLINA alta — banda diagonal de luz muy tenue + bruma
 *                  del acento arriba; deriva 44 s (transform).
 *   html::after    PULSOS DE RAYO — siete focos radiales del acento y cuatro
 *                  chispas; respiran en opacity (7 s, sin latigazos) y
 *                  derivan 30 s. (R89: fuera las vetas diagonales, que se
 *                  leían como una línea suelta a través de las tarjetas.)
 *   body::before   NIEBLA carmesí baja (recicla la rejilla de power-ui,
 *                  derogada); deriva 36 s.
 *   body::after    VIÑETA estática.
 * El color base vive en <html> y el body es transparente. Nada usa blur,
 * will-change ni background-position en bucle: el scroll no repinta.
 * `:not(#pa-nunca)` (1,0,0) porque power-ui pinta rejillas de 32 px sobre el
 * body con `html[data-power-accent] body.power-hud … !important` (0,2,2).
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca) {
  background-color: var(--power-bg-main, var(--power-bg, #09090b));
  background-image:
    radial-gradient(90% 55% at 50% -12%, color-mix(in srgb, var(--pa-accent) 11%, transparent), transparent 62%),
    radial-gradient(55% 40% at 102% 104%, color-mix(in srgb, var(--pa-accent) 8%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 30%, rgba(0, 0, 0, 0.35) 100%);
  background-attachment: fixed;
}
html:not(#pa-nunca) body.power-hud {
  background: transparent !important;
  animation: none !important;
}
/* NEBLINA ALTA · html::before */
html:not(#pa-nunca)::before {
  content: "";
  position: fixed;
  inset: -8% -10%;
  z-index: -1;               /* bajo el body (raíz): nunca tapa contenido */
  pointer-events: none;
  background-image:
    radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--pa-accent) 10%, transparent), transparent 70%),
    linear-gradient(118deg, transparent 40%, rgba(255, 255, 255, 0.022) 49.5%, transparent 59%),
    linear-gradient(62deg, transparent 58%, color-mix(in srgb, var(--pa-accent) 5%, transparent) 66%, transparent 74%);
  background-repeat: no-repeat;
  transform: translateZ(0);
  animation: pa-mist-drift 52s ease-in-out infinite;
}
/* PULSOS DE RAYO · html::after */
html:not(#pa-nunca)::after {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(160px 160px at 12% 18%, color-mix(in srgb, var(--pa-accent) 20%, transparent), transparent 70%),
    radial-gradient(120px 120px at 82% 24%, color-mix(in srgb, var(--pa-accent) 15%, transparent), transparent 70%),
    radial-gradient(220px 220px at 60% 78%, color-mix(in srgb, var(--pa-accent) 13%, transparent), transparent 70%),
    radial-gradient(90px 90px at 30% 64%, color-mix(in srgb, var(--pa-accent) 16%, transparent), transparent 70%),
    radial-gradient(140px 140px at 92% 70%, color-mix(in srgb, var(--pa-accent) 11%, transparent), transparent 70%),
    radial-gradient(70px 70px at 48% 30%, color-mix(in srgb, var(--pa-accent) 14%, transparent), transparent 70%),
    radial-gradient(180px 180px at 8% 88%, color-mix(in srgb, var(--pa-accent) 11%, transparent), transparent 70%),
    radial-gradient(3px 3px at 21% 31%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(2.5px 2.5px at 71% 58%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(2px 2px at 44% 82%, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(3px 3px at 86% 40%, rgba(255, 255, 255, 0.45), transparent 100%);
  background-repeat: no-repeat;
  opacity: 0.45;
  transform: translateZ(0);
  animation: pa-sparks 7s ease-in-out infinite, pa-sparks-drift 38s ease-in-out infinite;
}
/* R90 · bucles orgánicos: 5 puntos de paso sin ida-y-vuelta (el primero y el
   último coinciden), con giro de ±0.6° y escala que respira: la niebla
   nunca «rebota». Sólo transform. */
@keyframes pa-mist-drift {
  0%   { transform: translate3d(-1%, 0.6%, 0) rotate(0deg) scale(1.02); }
  22%  { transform: translate3d(0.6%, -0.4%, 0) rotate(0.4deg) scale(1.05); }
  48%  { transform: translate3d(1.2%, 0.9%, 0) rotate(-0.3deg) scale(1.03); }
  74%  { transform: translate3d(-0.4%, 1.1%, 0) rotate(0.6deg) scale(1.06); }
  100% { transform: translate3d(-1%, 0.6%, 0) rotate(0deg) scale(1.02); }
}
@keyframes pa-sparks {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.62; }
}
@keyframes pa-sparks-drift {
  0%   { transform: translate3d(-1.2%, 0.8%, 0) scale(1.02); }
  30%  { transform: translate3d(0.8%, -0.6%, 0) scale(1.05); }
  62%  { transform: translate3d(1.2%, 0.9%, 0) scale(1.03); }
  100% { transform: translate3d(-1.2%, 0.8%, 0) scale(1.02); }
}
/* NIEBLA · body::before (recicla la rejilla de power-ui) y VIÑETA · body::after.
   Sólo fuera de perfil con motor de skins (data-power-fx): ahí cada skin
   pinta su propio lienzo. */
html:not([data-power-fx]):not(#pa-nunca) body.power-hud::before {
  background-image:
    radial-gradient(42% 34% at 14% 8%, color-mix(in srgb, var(--pa-accent) 16%, transparent), transparent 70%),
    radial-gradient(38% 30% at 86% 92%, color-mix(in srgb, var(--pa-accent) 13%, transparent), transparent 70%),
    radial-gradient(60% 24% at 55% 48%, color-mix(in srgb, var(--pa-accent) 6%, transparent), transparent 70%),
    linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, 0.025) 49%, transparent 60%) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  transform: translateZ(0);
  animation: pa-smoke 48s ease-in-out infinite !important;
}
html:not([data-power-fx]):not(#pa-nunca) body.power-hud::after {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, color-mix(in srgb, var(--pa-accent) 9%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in srgb, var(--pa-accent) 6%, transparent), transparent 50%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%) !important;
  animation: none !important;
}
@keyframes pa-smoke {
  0%   { transform: translate3d(-1.5%, 0.5%, 0) rotate(0deg) scale(1.04); }
  20%  { transform: translate3d(0.4%, -0.8%, 0) rotate(-0.5deg) scale(1.08); }
  45%  { transform: translate3d(1.6%, 0.3%, 0) rotate(0.3deg) scale(1.11); }
  70%  { transform: translate3d(0.2%, 1.2%, 0) rotate(-0.4deg) scale(1.06); }
  100% { transform: translate3d(-1.5%, 0.5%, 0) rotate(0deg) scale(1.04); }
}

/* ══════════════════════════════════════════════════════════════════════════
 * B · CABECERA · vidrio carmesí biselado con hairline superior
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud header.power-console-header {
  background-color: rgba(9, 8, 12, 0.72) !important;
  background-image:
    linear-gradient(90deg, transparent 0 6%, color-mix(in srgb, var(--pa-accent) 85%, transparent) 30%, color-mix(in srgb, var(--pa-accent) 85%, transparent) 70%, transparent 94%),
    radial-gradient(70% 120% at 12% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 55%);
  background-size: 100% 1px, auto, auto;
  background-position: top center, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(16px) saturate(1.35) !important;
          backdrop-filter: blur(16px) saturate(1.35) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pa-accent) 30%, rgba(255, 255, 255, 0.06)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 color-mix(in srgb, var(--pa-accent) 22%, transparent),
    0 12px 30px -18px rgba(0, 0, 0, 0.9),
    0 0 40px -22px color-mix(in srgb, var(--pa-accent) 60%, transparent);
}

/* Pestañas de navegación: reposo en vidrio hundido, activo como placa neón
   con barra que late; el icono glitchea una vez al pasar. */
body.power-hud .power-nav-slot {
  border-radius: 0.7rem;
  transition: transform var(--pa-fast), border-color var(--pa-fast), color var(--pa-fast), box-shadow var(--pa-fast), background-color var(--pa-fast), filter var(--pa-fast);
}
body.power-hud .power-nav-slot:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 16px -8px color-mix(in srgb, var(--pa-accent) 70%, transparent);
}
body.power-hud .power-nav-slot:hover i { animation: pa-glitch 320ms steps(1, end) 1; }
body.power-hud .power-nav-slot:active { transform: scale(0.95); filter: brightness(1.3); transition-duration: 60ms; }
body.power-hud .power-nav-slot.is-active,
body.power-hud .power-nav-slot[aria-current="page"] {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--pa-accent) 34%, transparent), color-mix(in srgb, var(--pa-accent) 12%, transparent)) !important;
  border-color: color-mix(in srgb, var(--pa-accent) 60%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 18px -4px var(--pa-accent),
    0 2px 6px -2px rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 10px color-mix(in srgb, var(--pa-accent) 55%, transparent);
}
body.power-hud .power-nav-slot.is-active i,
body.power-hud .power-nav-slot[aria-current="page"] i { color: #fff !important; filter: drop-shadow(0 0 6px var(--pa-accent)); }
body.power-hud .power-nav-slot.is-active::after,
body.power-hud .power-nav-slot[aria-current="page"]::after {
  background: var(--pa-neon) !important;
  box-shadow: 0 0 8px var(--pa-accent), 0 0 18px color-mix(in srgb, var(--pa-accent) 60%, transparent);
  animation: pa-bar-pulse 2.8s ease-in-out infinite;
}
body.power-hud .power-nav-slot:focus-visible {
  outline: 2px solid var(--pa-neon);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-accent) 22%, transparent), 0 0 18px -2px var(--pa-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
 * C · LA BATERÍA DE LA ESQUINA · reestructurada
 * Antes: un aro degradado girando con `transform: rotate` (la caja redonda
 * giraba y los cantos bailaban). Ahora:
 *   ::after   aro cónico que ORBITA (variable registrada, la caja no gira):
 *             un punto blanco-caliente recorre el canto del cristal.
 *   ::before  aura del acento que respira 3.4 s detrás del cristal.
 *   icono     respira en brillo 4.4 s y glitchea 300 ms cada 11 s.
 *   hover     órbita ×4, destello y elevación.
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud .power-console-header .power-brand {
  isolation: isolate;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(160deg, rgba(20, 16, 22, 0.85), rgba(8, 6, 10, 0.95)) !important;
  border: 1px solid color-mix(in srgb, var(--pa-accent) 42%, rgba(255, 255, 255, 0.12)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -6px 12px -8px color-mix(in srgb, var(--pa-accent) 70%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 8px 18px -8px rgba(0, 0, 0, 0.9),
    0 0 22px -6px color-mix(in srgb, var(--pa-accent) 75%, transparent) !important;
}
body.power-hud .power-console-header .power-brand::after {
  content: "" !important;
  position: absolute;
  inset: -3px;
  border-radius: 17px;
  padding: 1.5px;
  background: conic-gradient(from var(--pa-ang, 0deg),
    transparent 0turn,
    color-mix(in srgb, var(--pa-accent) 0%, transparent) 0.58turn,
    color-mix(in srgb, var(--pa-accent) 70%, transparent) 0.74turn,
    #fff 0.79turn,
    color-mix(in srgb, var(--pa-accent) 70%, transparent) 0.84turn,
    transparent 0.98turn) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 1 !important;
  transform: none !important;
  animation: pa-orbit 6s linear infinite !important;
  pointer-events: none;
  z-index: 0;
}
body.power-hud .power-console-header .power-brand::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  background: radial-gradient(circle, color-mix(in srgb, var(--pa-accent) 55%, transparent), transparent 70%);
  opacity: 0.5;
  animation: pa-aura 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
/* R89 · sin `filter` en bucle: power-ui animaba drop-shadow en .power-brand
   (batteryIdleDefault) y R87 el brillo del icono — dos repintados por frame.
   Ahora la respiración es transform (scale) en la caja, el brillo del icono
   es estático y el glitch (transform) sigue cada 11 s. */
body.power-hud .power-console-header .power-brand,
body.power-hud .power-console-header #brand-home {
  animation: pa-brand-idle 4.4s ease-in-out infinite !important;
}
@keyframes pa-brand-idle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
body.power-hud .power-console-header .power-brand-icon {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pa-accent) 80%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--pa-accent) 45%, transparent));
  animation: pa-brand-glitch 11s steps(1, end) infinite;
}
body.power-hud .power-console-header .power-brand:hover { animation-duration: 1.6s !important; }
body.power-hud .power-console-header .power-brand:hover::after { animation-duration: 1.5s !important; }
body.power-hud .power-console-header .power-brand:hover .power-brand-icon { animation: pa-glitch 420ms steps(1, end) 1; }
body.power-hud .power-console-header .power-brand:active { animation: none !important; transform: scale(0.96); }

/* Insignias del header: LIVE, usuario, campana y mute como vidrio. */
body.power-hud .power-live-badge {
  border: 1px solid color-mix(in srgb, var(--pa-accent) 45%, transparent) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%), rgba(8, 6, 11, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 14px -6px var(--pa-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--pa-accent) 60%, transparent);
}
body.power-hud .power-session-pill,
body.power-hud .power-user-pill {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%), rgba(8, 6, 11, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: border-color var(--pa-fast), box-shadow var(--pa-fast), transform var(--pa-fast);
}
body.power-hud .power-session-pill:hover,
body.power-hud .power-user-pill:hover {
  border-color: color-mix(in srgb, var(--pa-accent) 55%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 16px -5px var(--pa-accent);
  transform: translateY(-1px);
}
body.power-hud .power-notif-bell,
body.power-hud .power-mute-btn {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%), rgba(8, 6, 11, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: border-color var(--pa-fast), box-shadow var(--pa-fast), transform var(--pa-fast), color var(--pa-fast), filter var(--pa-fast);
}
body.power-hud .power-notif-bell:hover,
body.power-hud .power-mute-btn:hover {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--pa-accent) 60%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 16px -4px var(--pa-accent);
  transform: translateY(-1px);
}
body.power-hud .power-notif-bell:active,
body.power-hud .power-mute-btn:active { transform: scale(0.92); filter: brightness(1.4); transition-duration: 60ms; }
/* Mute inteligente en el interior (soundscape.js): sólo-música. */
body.power-hud .power-mute-btn.is-music-off { color: #ffb347 !important; border-color: rgba(255, 179, 71, 0.55) !important; box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.25), 0 0 14px -4px rgba(255, 179, 71, 0.9); }
body.power-hud .power-mute-btn.is-holding { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-accent) 35%, transparent), 0 0 18px -2px var(--pa-accent) !important; }
body.power-hud .power-mute-btn.is-flash { animation: pa-flash 520ms ease-out 1; }

/* ══════════════════════════════════════════════════════════════════════════
 * D · PANELES · vidrio carmesí biselado
 * Hairline superior del acento, ticks de esquina, reflejo frío arriba-
 * izquierda, rescoldo inferior y sombra de profundidad interna. Sólo se
 * pinta `background-image` + `box-shadow` + `border`: cada tarjeta conserva
 * su color de fondo (y su radio) de power-ui.css.
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud .power-card,
body.power-hud .power-panel,
body.power-hud .power-stat-card,
body.power-hud .power-monitor,
body.power-hud .pf-section,
body.power-hud .pw-game-card,
body.power-hud .rpg-card,
body.power-hud .alumno-card,
body.power-hud .curso-card,
body.power-hud .curso-stat-box,
body.power-hud .curso-tech,
body.power-hud .ag-battlepass,
body.power-hud .pw-tcg-card,
body.power-hud .as-glass,
body.power-hud .as-radar-card,
body.power-hud .feed-venta-row,
/* Paneles «tailwind» (bg-zinc-900/950 + rounded-2xl/3xl): la mayoría de las
   cajas de dashboard, asistencia, agenda, +Pago y alumnos. Sólo contenedores
   grandes (rounded-2xl/3xl); las pastillas rounded-xl quedan como están. */
body.power-hud :is(div, section, article, aside, form)[class*="rounded-2xl"]:is([class*="bg-zinc-9"], [class*="bg-[#0"], [class*="bg-black/"]),
body.power-hud :is(div, section, article, aside, form)[class*="rounded-3xl"]:is([class*="bg-zinc-9"], [class*="bg-[#0"], [class*="bg-black/"]) {
  background-image:
    linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--pa-accent) 85%, transparent) 30%, color-mix(in srgb, var(--pa-accent) 85%, transparent) 70%, transparent 92%),
    linear-gradient(90deg, color-mix(in srgb, var(--pa-accent) 80%, transparent), color-mix(in srgb, var(--pa-accent) 80%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--pa-accent) 80%, transparent), color-mix(in srgb, var(--pa-accent) 80%, transparent)),
    radial-gradient(70% 40% at 18% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
    radial-gradient(60% 34% at 50% 108%, color-mix(in srgb, var(--pa-accent) 14%, transparent), transparent 70%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.025) 0%, transparent 40%, rgba(0, 0, 0, 0.18) 100%) !important;
  background-size: 100% 1px, 16px 2px, 16px 2px, auto, auto, auto !important;
  background-position: top center, left 12px bottom 8px, right 12px bottom 8px, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px color-mix(in srgb, var(--pa-accent) 7%, transparent),
    inset 0 -24px 48px -40px color-mix(in srgb, var(--pa-accent) 80%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 22px 44px -30px rgba(0, 0, 0, 0.9),
    0 0 46px -26px color-mix(in srgb, var(--pa-accent) 55%, transparent) !important;
}
body.power-hud .power-stat-card { border-left-color: var(--pa-accent) !important; }
body.power-hud .power-stat-card:hover,
body.power-hud .rpg-card:hover,
body.power-hud .alumno-card:hover,
body.power-hud .curso-card:hover {
  border-color: color-mix(in srgb, var(--pa-accent) 45%, rgba(255, 255, 255, 0.1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -24px 48px -40px color-mix(in srgb, var(--pa-accent) 90%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 28px 50px -30px rgba(0, 0, 0, 0.95),
    0 0 40px -14px color-mix(in srgb, var(--pa-accent) 75%, transparent) !important;
}

/* Cabezas de sección: kicker en ámbar del acento y título Orbitron con neón. */
body.power-hud .power-section-head { border-bottom-color: color-mix(in srgb, var(--pa-accent) 22%, transparent) !important; }
body.power-hud .power-section-head h1,
body.power-hud .power-section-head h2,
body.power-hud .power-page-head h1,
body.power-hud .power-page-head h2 {
  font-family: 'Orbitron', 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 14px color-mix(in srgb, var(--pa-accent) 45%, transparent), 0 1px 0 rgba(0, 0, 0, 0.6);
}
body.power-hud .power-label { color: var(--pa-ember) !important; letter-spacing: 0.2em; }

/* ══════════════════════════════════════════════════════════════════════════
 * E · BOTONES
 * E1 · Primarios: PLACA CHAFLANADA cyber-meca (dos capas: ::after borde
 *      neón orbitando, ::before cuerpo de vidrio biselado). Sólo en los que
 *      no usan sus pseudos en power-ui.css bajo acentos neutrales.
 * E2 · Todos los demás controles: micro-interacciones universales (hover
 *      brillo, active compresión + destello, focus anillo neón) y glitch de
 *      una pasada en chips y pestañas.
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud .power-cta,
body.power-hud .pw-hextech-btn,
body.power-hud .btn-primary,
body.power-hud .btn-accent,
body.power-hud .pay-btn,
body.power-hud .ops-dock-btn.pw-tac-crimson,
body.power-hud .tcg-btn-sync,
body.power-hud .pw-overlay button[class*="bg-amber-5"],
body.power-hud [id$="-modal"] button[class*="bg-amber-5"],
body.power-hud button[class*="bg-[#FF3B30]"],
body.power-hud a[class*="bg-[#FF3B30]"],
body.power-hud button[class*="bg-red-6"] {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: 'Orbitron', 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.6);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pa-accent) 50%, transparent)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.65));
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), filter 200ms ease !important;
}
body.power-hud .power-cta::after,
body.power-hud .pw-hextech-btn::after,
body.power-hud .btn-primary::after,
body.power-hud .btn-accent::after,
body.power-hud .pay-btn::after,
body.power-hud .ops-dock-btn.pw-tac-crimson::after,
body.power-hud .tcg-btn-sync::after,
body.power-hud .pw-overlay button[class*="bg-amber-5"]::after,
body.power-hud [id$="-modal"] button[class*="bg-amber-5"]::after,
body.power-hud button[class*="bg-[#FF3B30]"]::after,
body.power-hud a[class*="bg-[#FF3B30]"]::after,
body.power-hud button[class*="bg-red-6"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
  clip-path: polygon(var(--pa-cut) 0, calc(100% - var(--pa-cut)) 0, 100% var(--pa-cut), 100% calc(100% - var(--pa-cut)), calc(100% - var(--pa-cut)) 100%, var(--pa-cut) 100%, 0 calc(100% - var(--pa-cut)), 0 var(--pa-cut));
  background:
    conic-gradient(from var(--pa-ang, 0deg),
      color-mix(in srgb, var(--pa-accent) 35%, transparent) 0turn,
      color-mix(in srgb, var(--pa-accent) 35%, transparent) 0.55turn,
      color-mix(in srgb, var(--pa-accent) 60%, #fff) 0.70turn,
      #fff 0.75turn,
      color-mix(in srgb, var(--pa-accent) 60%, #fff) 0.80turn,
      color-mix(in srgb, var(--pa-accent) 35%, transparent) 0.95turn),
    linear-gradient(180deg, color-mix(in srgb, var(--pa-accent) 45%, #fff), color-mix(in srgb, var(--pa-accent) 85%, #000));
  animation: pa-orbit 4.2s linear infinite;
  transform: translateZ(0);
  opacity: 1;
  pointer-events: none;
}
body.power-hud .power-cta::before,
body.power-hud .pw-hextech-btn::before,
body.power-hud .btn-primary::before,
body.power-hud .btn-accent::before,
body.power-hud .pay-btn::before,
body.power-hud .ops-dock-btn.pw-tac-crimson::before,
body.power-hud .tcg-btn-sync::before,
body.power-hud .pw-overlay button[class*="bg-amber-5"]::before,
body.power-hud [id$="-modal"] button[class*="bg-amber-5"]::before,
body.power-hud button[class*="bg-[#FF3B30]"]::before,
body.power-hud a[class*="bg-[#FF3B30]"]::before,
body.power-hud button[class*="bg-red-6"]::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 0;
  clip-path: polygon(calc(var(--pa-cut) - 1px) 0, calc(100% - var(--pa-cut) + 1px) 0, 100% calc(var(--pa-cut) - 1px), 100% calc(100% - var(--pa-cut) + 1px), calc(100% - var(--pa-cut) + 1px) 100%, calc(var(--pa-cut) - 1px) 100%, 0 calc(100% - var(--pa-cut) + 1px), 0 calc(var(--pa-cut) - 1px));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.10) 3px, transparent 32%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0, transparent 4px),
    repeating-linear-gradient(-32deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 7px),
    radial-gradient(90% 120% at 50% 118%, color-mix(in srgb, var(--pa-accent) 55%, #fff) 0, transparent 58%),
    linear-gradient(170deg, color-mix(in srgb, var(--pa-accent) 78%, #fff) 0%, var(--pa-accent) 46%, var(--pa-deep) 100%);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.55),
    inset 0 -4px 0 rgba(0, 0, 0, 0.45),
    inset 0 -10px 16px -8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateZ(0);
  opacity: 1;
  animation: none;
  pointer-events: none;
}
body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"]):hover {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 12px var(--pa-accent)) drop-shadow(0 0 30px color-mix(in srgb, var(--pa-accent) 65%, transparent)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7)) brightness(1.08) !important;
}
body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"]):hover::before { animation: pa-glitch 420ms steps(1, end) 1; }
body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"]):hover::after { animation: pa-orbit 1.6s linear infinite, pa-flash 420ms ease-out 1; }
body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"]):active {
  transform: translateY(1px) scale(0.985) !important;
  filter: drop-shadow(0 0 16px var(--pa-accent)) brightness(1.2) !important;
  transition-duration: 60ms !important;
}
body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, .pw-overlay button[class*="bg-amber-5"], [id$="-modal"] button[class*="bg-amber-5"], button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"]):focus-visible {
  outline: 2px solid var(--pa-neon);
  outline-offset: 3px;
}
body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .pay-btn):disabled {
  opacity: 0.55;
  transform: none !important;
  filter: grayscale(0.3) !important;
}

/* E2 · micro-interacciones universales: chips, pestañas, celdas, iconos. */
body.power-hud :is(.filter-btn, .tcg-pill, .ag-chip, .as-tab, .curso-dia-tab, .cat-btn, .roles-tab, .pw-wardrobe-tab, .tcg-filtro-btn, .sim-opt, .boveda-fbtn, .mc-slot, .hud-slot, .edit-btn, .btn-checkin, .btn-checkin-one, .btn-hist-one, .btn-reward, .btn-pet-icon, .jukebox-btn, .btn-otorgar-qty, .btn-beca-tokens, .btn-aplicar-minimo, .tcg-btn-descartar, .tcg-skip-btn, .tcg-ref-edit-btn, .pw-obs-btn, .exito-cerrar, .exito-x, .hud-mision-close, .boveda-cerrar, .pf-settings-gear, .cal-cell, .ops-dock-btn, .tcg-dock-btn, .power-wa-btn, .wa-btn-card, .pw-wa-btn) {
  transition: transform var(--pa-fast), filter var(--pa-fast), box-shadow var(--pa-fast), border-color var(--pa-fast), background-color var(--pa-fast), color var(--pa-fast);
}
body.power-hud :is(.filter-btn, .tcg-pill, .ag-chip, .as-tab, .curso-dia-tab, .cat-btn, .roles-tab, .pw-wardrobe-tab, .tcg-filtro-btn, .sim-opt, .boveda-fbtn, .edit-btn, .btn-checkin, .btn-checkin-one, .btn-hist-one, .btn-reward, .btn-otorgar-qty, .btn-beca-tokens, .btn-aplicar-minimo, .tcg-btn-descartar, .tcg-skip-btn, .tcg-ref-edit-btn, .pw-obs-btn, .exito-cerrar, .boveda-cerrar, .ops-dock-btn, .tcg-dock-btn, .power-wa-btn, .wa-btn-card, .pw-wa-btn):hover {
  filter: brightness(1.15) saturate(1.1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa-accent) 30%, transparent), 0 0 16px -6px color-mix(in srgb, var(--pa-accent) 80%, transparent);
}
body.power-hud :is(.filter-btn, .tcg-pill, .ag-chip, .as-tab, .curso-dia-tab, .cat-btn, .roles-tab, .pw-wardrobe-tab, .tcg-filtro-btn, .sim-opt, .boveda-fbtn):hover { animation: pa-glitch 320ms steps(1, end) 1; }
body.power-hud :is(.filter-btn, .tcg-pill, .ag-chip, .as-tab, .curso-dia-tab, .cat-btn, .roles-tab, .pw-wardrobe-tab, .tcg-filtro-btn, .sim-opt, .boveda-fbtn, .mc-slot, .hud-slot, .edit-btn, .btn-checkin, .btn-checkin-one, .btn-hist-one, .btn-reward, .btn-pet-icon, .jukebox-btn, .btn-otorgar-qty, .btn-beca-tokens, .btn-aplicar-minimo, .tcg-btn-descartar, .tcg-skip-btn, .tcg-ref-edit-btn, .pw-obs-btn, .exito-cerrar, .exito-x, .hud-mision-close, .boveda-cerrar, .pf-settings-gear, .cal-cell, .ops-dock-btn, .tcg-dock-btn, .power-wa-btn, .wa-btn-card, .pw-wa-btn):active {
  transform: scale(0.95);
  filter: brightness(1.35);
  transition-duration: 60ms;
}
/* Chips activos: placa neón del acento (misma familia que la pestaña activa). */
body.power-hud :is(.filter-btn.active, .filter-btn.is-active, .tcg-pill.is-active, .ag-chip.is-on, .as-tab.is-on, .curso-dia-tab.is-active, .roles-tab.is-active, .pw-wardrobe-tab.is-active, .tcg-filtro-btn.is-active, .cat-btn.is-active, .cat-btn.active, .sim-opt.is-active, .boveda-fbtn.is-active) {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--pa-accent) 36%, transparent), color-mix(in srgb, var(--pa-accent) 14%, transparent)) !important;
  border-color: color-mix(in srgb, var(--pa-accent) 62%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 18px -4px var(--pa-accent), 0 2px 6px -2px rgba(0, 0, 0, 0.8) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--pa-accent) 55%, transparent);
}
/* Anillo de foco neón global para teclado. */
body.power-hud :is(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--pa-neon) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-accent) 22%, transparent), 0 0 18px -2px var(--pa-accent);
}

/* E3 · DOCK DE ACCIONES DEL DASHBOARD (R88) · armonización cyber-meca
   Registrar Factura ya es placa (pw-tac-crimson). Los demás (Tomar
   Asistencia, WhatsApp, Reporte, Power Link) dejan los planos ámbar/verde/
   oro/violeta: cristal carmesí con reflejo superior, borde neón fino y un
   pulso de brillo al pasar (filter, sólo en hover). El icono/semántica de
   cada uno se mantiene por texto. */
body.power-hud .ops-dock-btn:not(.pw-tac-crimson) {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%),
    radial-gradient(70% 40% at 18% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
    radial-gradient(60% 34% at 50% 108%, color-mix(in srgb, var(--pa-accent) 28%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--pa-accent) 30%, rgba(12, 9, 14, 0.85)), color-mix(in srgb, var(--pa-accent) 10%, rgba(8, 6, 10, 0.9))) !important;
  border: 1px solid color-mix(in srgb, var(--pa-accent) 55%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -6px 12px -8px color-mix(in srgb, var(--pa-accent) 70%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 18px -6px color-mix(in srgb, var(--pa-accent) 80%, transparent),
    0 10px 20px -12px rgba(0, 0, 0, 0.9) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--pa-accent) 55%, transparent), 0 1px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.08em;
  --pw-tac-glow: color-mix(in srgb, var(--pa-accent) 45%, transparent);
  transition: transform var(--pa-fast), filter var(--pa-fast), box-shadow var(--pa-fast), border-color var(--pa-fast) !important;
}
body.power-hud .ops-dock-btn:not(.pw-tac-crimson):hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--pa-accent) 85%, #fff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px color-mix(in srgb, var(--pa-accent) 60%, transparent),
    0 0 26px -4px var(--pa-accent),
    0 14px 24px -12px rgba(0, 0, 0, 0.9) !important;
  animation: pa-glow-pulse 1.6s ease-in-out infinite;
}
body.power-hud .ops-dock-btn:not(.pw-tac-crimson):active {
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(1.35) !important;
  animation: none;
  transition-duration: 60ms !important;
}
@keyframes pa-glow-pulse {
  0%, 100% { filter: brightness(1.06) saturate(1.05); }
  50%      { filter: brightness(1.3) saturate(1.2) drop-shadow(0 0 6px color-mix(in srgb, var(--pa-accent) 70%, transparent)); }
}
/* «REPORTE» y «MEMORY» del encabezado del Live Ops: mismo cristal, más bajo. */
body.power-hud .power-nav-slot.btn-reporte-header,
body.power-hud #btn-memory-card {
  border: 1px solid color-mix(in srgb, var(--pa-accent) 40%, transparent) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--pa-accent) 10%, rgba(8, 6, 11, 0.6)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 14px -8px var(--pa-accent);
  color: #f4f4f5 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * F · CAMPOS · vidrio hundido, hairline de acento a la izquierda, foco neón
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud :is(input[type="text"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="month"], input:not([type]), select, textarea):not(.login-input):not(.sr-only):not(.peer) {
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04), inset 3px 0 0 -1px color-mix(in srgb, var(--pa-accent) 55%, transparent) !important;
  caret-color: var(--pa-neon);
  transition: border-color var(--pa-fast), box-shadow var(--pa-fast), background-color var(--pa-fast), transform var(--pa-fast) !important;
}
body.power-hud :is(input[type="text"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="month"], input:not([type]), select, textarea):not(.login-input):hover { border-color: rgba(255, 255, 255, 0.2) !important; }
body.power-hud :is(input[type="text"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="month"], input:not([type]), select, textarea):not(.login-input):focus {
  outline: none !important;
  border-color: var(--pa-neon) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-accent) 22%, transparent), 0 0 22px -2px color-mix(in srgb, var(--pa-accent) 75%, transparent), inset 0 2px 6px rgba(0, 0, 0, 0.6), inset 3px 0 0 -1px var(--pa-neon) !important;
}
body.power-hud input[type="checkbox"],
body.power-hud input[type="radio"] { accent-color: var(--pa-accent); }

/* ══════════════════════════════════════════════════════════════════════════
 * G · MODALES · vidrio ahumado con hairline + ticks
 * Mismos valores que R76 — ahora en TODAS las páginas SIN motor de skins.
 * En perfil (html[data-power-fx], power-skin-fx.js) mandan power-skins.css y
 * las reglas por ID de la propia página (las que r69 certifica): esta hoja
 * no las toca. Velo: difumina y tiñe apenas con el acento.
 * ════════════════════════════════════════════════════════════════════════ */
html:not([data-power-fx]) body.power-hud .pw-overlay:not(.hidden) > :not(.pw-backdrop),
html:not([data-power-fx]) body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
html:not([data-power-fx]) body.power-hud .pw-panel,
html:not([data-power-fx]) body.power-hud .pw-modal,
html:not([data-power-fx]) body.power-hud .pw-modal-box,
html:not([data-power-fx]) body.power-hud .pw-modal-content,
html:not([data-power-fx]) body.power-hud .modal-card,
html:not([data-power-fx]) body.power-hud .modal-container,
html:not([data-power-fx]) body.power-hud dialog[open],
html:not([data-power-fx]) body.power-hud .modal-vinculacion-box,
html:not([data-power-fx]) body.power-hud .exito-sheet,
html:not([data-power-fx]) body.power-hud .exito-card,
html:not([data-power-fx]) body.power-hud .boveda-panel,
html:not([data-power-fx]) body.power-hud .hud-mision-sheet {
  background-color: rgba(12, 12, 18, 0.85) !important;
  background-image:
    linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--pa-accent) 85%, transparent) 30%, color-mix(in srgb, var(--pa-accent) 85%, transparent) 70%, transparent 92%),
    linear-gradient(90deg, color-mix(in srgb, var(--pa-accent) 80%, transparent), color-mix(in srgb, var(--pa-accent) 80%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--pa-accent) 80%, transparent), color-mix(in srgb, var(--pa-accent) 80%, transparent)),
    radial-gradient(38% 30% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(42% 34% at 100% 100%, color-mix(in srgb, var(--pa-accent) 14%, transparent), transparent 70%) !important;
  background-size: 100% 1px, 18px 2px, 18px 2px, auto, auto !important;
  background-position: top center, left 14px bottom 10px, right 14px bottom 10px, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
          backdrop-filter: blur(16px) saturate(1.18) !important;
  border: 1px solid color-mix(in srgb, var(--pa-accent) 44%, transparent) !important;
  border-radius: 1.1rem !important;
  box-shadow:
    0 0 25px color-mix(in srgb, var(--pa-accent) 25%, transparent),
    0 28px 64px -28px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.035),
    inset -1px 0 0 rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 -18px 40px -30px color-mix(in srgb, var(--pa-accent) 55%, transparent) !important;
}
html:not([data-power-fx]) body.power-hud .pw-overlay:not(.hidden) > .pw-backdrop,
html:not([data-power-fx]) body.power-hud .pw-backdrop,
html:not([data-power-fx]) body.power-hud .power-modal-backdrop,
html:not([data-power-fx]) body.power-hud [id$="-modal"]:not(.hidden) > .absolute.inset-0,
html:not([data-power-fx]) body.power-hud dialog[open]::backdrop {
  background: color-mix(in srgb, var(--pa-accent) 4%, rgba(4, 4, 8, 0.62)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(0.9) !important;
          backdrop-filter: blur(12px) saturate(0.9) !important;
}
html:not([data-power-fx]) body.power-hud :is(.pw-overlay, .pw-panel, [id$="-modal"], dialog) [aria-label^="Cerrar"],
html:not([data-power-fx]) body.power-hud :is(.pw-overlay, .pw-panel, [id$="-modal"], dialog) [aria-label="Cerrar"] {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pa-accent) 30%, transparent);
  background: color-mix(in srgb, var(--pa-accent) 10%, rgba(255, 255, 255, 0.03)) !important;
  transition: transform var(--pa-fast), box-shadow var(--pa-fast), background-color var(--pa-fast), color var(--pa-fast);
}
html:not([data-power-fx]) body.power-hud :is(.pw-overlay, .pw-panel, [id$="-modal"], dialog) [aria-label^="Cerrar"]:hover {
  transform: scale(1.08);
  color: #fff;
  background: color-mix(in srgb, var(--pa-accent) 22%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa-accent) 70%, transparent), 0 0 16px -2px var(--pa-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
 * K · PERFIL UNIDAD · SHOWCASE SUPREMO (R88)
 * La ID Card (.pf-hero) es donde la skin equipada se luce: aura de energía
 * viva DENTRO del cristal (::after: dos focos del acento que respiran y una
 * veta de luz que barre 9 s; overflow-hidden la contiene), bisel neón
 * reflectante (filo blanco arriba, canto oscuro abajo, borde del acento al
 * 55 %), halo exterior más ancho. Al pasar, la tarjeta se eleva y el aura
 * acelera. Los ORBES del selector (.hud-skin-chip): al pasar el swatch se
 * eleva con brillo y saturación y una lámina de luz cruza el orbe
 * (::after del swatch, libre); el equipado suma un aro de luz. Sólo
 * transform / opacity / filter; sin will-change nuevo (14/14 · r69). Se
 * deja libre `.pf-hero::after` sólo bajo los motores cyan/mint, que lo usan.
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud .pf-hero {
  /* R90 · vidrio ahumado carmesí: 58–72 % de opacidad con tinte del acento,
     así la niebla, las partículas y las chispas del fondo se ven pasar
     detrás de la ID Card. El blur (6 px) sólo en escritorio: en móvil la
     regla P lo apaga y el tinte hace el vidrio. */
  background:
    radial-gradient(ellipse 90% 70% at 50% -15%, color-mix(in srgb, var(--pa-accent) 24%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--pa-accent) 13%, rgba(14, 6, 10, 0.58)) 0%, color-mix(in srgb, var(--pa-accent) 6%, rgba(6, 3, 6, 0.72)) 70%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.3);
          backdrop-filter: blur(6px) saturate(1.3);
  border-color: color-mix(in srgb, var(--pa-accent) 55%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px color-mix(in srgb, var(--pa-accent) 12%, transparent),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    inset 0 -30px 60px -40px color-mix(in srgb, var(--pa-accent) 90%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 30px 60px -30px rgba(0, 0, 0, 0.95),
    0 0 70px -20px color-mix(in srgb, var(--pa-accent) 85%, transparent) !important;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}
body.power-hud .pf-hero:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -30px 60px -40px var(--pa-accent),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 36px 70px -30px rgba(0, 0, 0, 0.95),
    0 0 90px -16px var(--pa-accent) !important;
}
html:not([data-power-fx="pulse"]):not([data-power-fx="frost"]) body.power-hud .pf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(60% 45% at 18% 12%, color-mix(in srgb, var(--pa-accent) 34%, transparent), transparent 70%),
    radial-gradient(55% 40% at 84% 92%, color-mix(in srgb, var(--pa-accent) 30%, transparent), transparent 70%),
    linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.12) 49%, color-mix(in srgb, var(--pa-accent) 40%, #fff) 50%, rgba(255, 255, 255, 0.10) 51%, transparent 60% 100%);
  background-size: 100% 100%, 100% 100%, 260% 100%;
  background-repeat: no-repeat;
  opacity: 0.5;
  animation: pa-hero-aura 3.4s ease-in-out infinite;
}
@keyframes pa-hero-aura {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.015); }
}
body.power-hud .pf-hero:hover::after { animation-duration: 1.4s; }
/* Veta de luz que barre la tarjeta cada 9 s (transform sobre un pseudo del
   layout interno, encima del aura y bajo el contenido). */
/* R90 · el barrido queda 100 % DENTRO de la tarjeta: power-skins deja
   .pf-hero con overflow visible (por el aura del avatar), así que el clip va
   en el layout interno: inset negativo = el relleno de la tarjeta, con las
   esquinas redondeadas, y nunca más allá del canto del cristal. */
body.power-hud .pf-hero-card-layout { position: relative; clip-path: inset(-18px round 1.25rem); }
@media (max-width: 480px) { body.power-hud .pf-hero-card-layout { clip-path: inset(-8px round 1rem); } }
body.power-hud .pf-hero-card-layout::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, 0.05) 48%, color-mix(in srgb, var(--pa-accent) 28%, rgba(255, 255, 255, 0.35)) 50%, rgba(255, 255, 255, 0.04) 52%, transparent 58% 100%);
  opacity: 0.55;
  transform: translate3d(-60%, 0, 0);
  animation: pa-hero-sweep 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pa-hero-sweep {
  0%   { transform: translate3d(-60%, 0, 0); opacity: 0; }
  6%   { opacity: 0.55; }
  22%  { transform: translate3d(60%, 0, 0); opacity: 0; }
  100% { transform: translate3d(60%, 0, 0); opacity: 0; }
}
/* R90 · HÁBITAT · el resplandor rojo del techo se apaga (ambient-light y el
   neón superior del Studio HQ); el carmesí vive sólo en la base: un halo
   pegado a la sombra de suelo de la mascota (la sigue al caminar), sin
   tocar la duela ni la parte alta. De paso desaparecen dos animaciones de
   `filter` en bucle (ambientPulse / neonFlicker). */
body.power-hud #habitat-ambient-light,
body.power-hud #habitat-neon-fx { display: none !important; animation: none !important; }
body.power-hud .pet-ground-shadow {
  background: radial-gradient(rgba(0, 0, 0, 0.62), transparent 70%) !important;
  box-shadow:
    0 0 18px 4px color-mix(in srgb, var(--pa-accent) 48%, transparent),
    0 0 44px 14px color-mix(in srgb, var(--pa-accent) 18%, transparent);
}
/* Modales y secciones del Perfil: vidrio ahumado carmesí sutilmente
   transparente (el velo conserva su blur de 12 px: se ve la página detrás). */
html[data-power-fx][data-power-accent] body.power-hud .pw-overlay:not(.hidden) > :not(.pw-backdrop),
html[data-power-fx][data-power-accent] body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
html[data-power-fx][data-power-accent] body.power-hud .pw-panel,
html[data-power-fx][data-power-accent] body.power-hud .pw-modal,
html[data-power-fx][data-power-accent] body.power-hud .pw-modal-box,
html[data-power-fx][data-power-accent] body.power-hud .modal-card,
html[data-power-fx][data-power-accent] body.power-hud .modal-container,
html[data-power-fx][data-power-accent] body.power-hud dialog[open],
html[data-power-fx][data-power-accent] body.power-hud .modal-vinculacion-box {
  background-color: color-mix(in srgb, var(--pa-accent) 9%, rgba(10, 6, 10, 0.66)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
          backdrop-filter: blur(14px) saturate(1.2) !important;
}
html[data-power-fx][data-power-accent] body.power-hud .pf-section {
  background-color: color-mix(in srgb, var(--pa-accent) 6%, rgba(10, 6, 10, 0.56)) !important;
}
/* Orbes del selector de skins. */
body.power-hud .hud-skin-chip { transition: transform var(--pa-fast), box-shadow var(--pa-fast), border-color var(--pa-fast), filter var(--pa-fast); }
body.power-hud .hud-skin-chip .hud-skin-chip-swatch { position: relative; overflow: hidden; transition: transform var(--pa-fast), filter var(--pa-fast); }
body.power-hud .hud-skin-chip:hover:not(.hud-skin-chip-locked) {
  border-color: color-mix(in srgb, var(--pa-accent) 70%, #fff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa-accent) 45%, transparent), 0 0 22px -4px var(--pa-accent), 0 10px 18px -10px rgba(0, 0, 0, 0.9);
}
body.power-hud .hud-skin-chip:hover:not(.hud-skin-chip-locked) .hud-skin-chip-swatch {
  transform: translateY(-2px) scale(1.08);
  filter: brightness(1.28) saturate(1.25) drop-shadow(0 0 6px color-mix(in srgb, var(--pa-accent) 80%, transparent));
}
body.power-hud .hud-skin-chip .hud-skin-chip-swatch::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58% 100%);
  transform: translate3d(-70%, 0, 0);
  opacity: 0;
  pointer-events: none;
}
body.power-hud .hud-skin-chip:hover:not(.hud-skin-chip-locked) .hud-skin-chip-swatch::after { animation: pa-orb-sheen 640ms cubic-bezier(0.16, 1, 0.3, 1) 1; }
@keyframes pa-orb-sheen { 0% { transform: translate3d(-70%, 0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate3d(70%, 0, 0); opacity: 0; } }
body.power-hud .hud-skin-chip:active:not(.hud-skin-chip-locked) .hud-skin-chip-swatch { transform: scale(0.94); filter: brightness(1.5); transition-duration: 60ms; }
body.power-hud .hud-skin-chip.hud-skin-chip-on {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--pa-accent) 65%, transparent),
    0 0 0 4px rgba(0, 0, 0, 0.5),
    0 0 24px -2px var(--pa-accent),
    0 0 48px -10px color-mix(in srgb, var(--pa-accent) 70%, transparent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * L · ONDAS AL BEAT Y PARTÍCULAS EN GRAVEDAD                         (R90)
 * Los nodos los crea soundscape.js (#pa-ondas, #pa-particulas); aquí sólo
 * viven sus estilos. Fijos, z −1 (bajo el contenido, sobre el lienzo),
 * pointer-events none, sólo transform / opacity en bucle.
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud #pa-ondas,
body.power-hud #pa-particulas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
/* Onda: anillo fino del acento + rescoldo interior. Nace en el centro con el
   desfase --dx/--dy, crece hasta ×2.4 y se funde. */
body.power-hud .pa-onda {
  position: absolute;
  left: calc(50% + var(--dx, 0%));
  top: calc(46% + var(--dy, 0%));
  width: 76vmax;
  height: 76vmax;
  margin: -38vmax 0 0 -38vmax;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 22%, color-mix(in srgb, var(--pa-accent) 55%, transparent) 22.6% 23.1%, transparent 23.9% 100%),
    radial-gradient(circle, color-mix(in srgb, var(--pa-accent) 14%, transparent) 0, transparent 26%);
  opacity: 0;
  transform: scale(0.15) translateZ(0);
  animation: pa-onda-vida var(--dur, 6.5s) cubic-bezier(0.12, 0.6, 0.3, 1) 1 forwards;
}
@keyframes pa-onda-vida {
  0%   { transform: scale(0.15) translateZ(0); opacity: 0; }
  8%   { opacity: var(--pico, 0.3); }
  55%  { opacity: calc(var(--pico, 0.3) * 0.4); }
  100% { transform: scale(2.6) translateZ(0); opacity: 0; }
}
/* Partículas: cada capa es un mosaico de 100 vh con 9 puntos difuminados del
   acento, repetido en vertical; la capa mide 160 vh (mosaico de 60 vh) y baja
   exactamente un mosaico por ciclo (bucle sin costura). La capa B es más lenta y más
   pequeña: paralaje = profundidad. La deriva lateral la da un segundo
   keyframe sobre el contenedor. */
body.power-hud #pa-particulas { animation: pa-part-deriva 26s ease-in-out infinite; }
body.power-hud .pa-capa {
  position: absolute;
  left: -4%; right: -4%;
  top: -60vh;
  height: 160vh;
  background-repeat: repeat;
  background-size: 100% 60vh;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
body.power-hud .pa-capa-a {
  background-image:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--pa-accent) 70%, #fff) 0, color-mix(in srgb, var(--pa-accent) 40%, transparent) 2px, transparent 7px),
    radial-gradient(circle at 23% 58%, color-mix(in srgb, var(--pa-accent) 60%, transparent) 0, transparent 5px),
    radial-gradient(circle at 37% 28%, color-mix(in srgb, var(--pa-accent) 75%, #fff) 0, color-mix(in srgb, var(--pa-accent) 35%, transparent) 2px, transparent 9px),
    radial-gradient(circle at 52% 82%, color-mix(in srgb, var(--pa-accent) 55%, transparent) 0, transparent 6px),
    radial-gradient(circle at 64% 16%, color-mix(in srgb, var(--pa-accent) 65%, transparent) 0, transparent 5px),
    radial-gradient(circle at 76% 46%, color-mix(in srgb, var(--pa-accent) 80%, #fff) 0, color-mix(in srgb, var(--pa-accent) 30%, transparent) 2px, transparent 10px),
    radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--pa-accent) 55%, transparent) 0, transparent 6px),
    radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--pa-accent) 50%, transparent) 0, transparent 5px),
    radial-gradient(circle at 93% 22%, color-mix(in srgb, var(--pa-accent) 60%, transparent) 0, transparent 4px);
  opacity: 0.55;
  animation: pa-part-caida 46s linear infinite;
}
body.power-hud .pa-capa-b {
  background-image:
    radial-gradient(circle at 18% 34%, color-mix(in srgb, var(--pa-accent) 50%, transparent) 0, transparent 4px),
    radial-gradient(circle at 44% 64%, color-mix(in srgb, var(--pa-accent) 45%, transparent) 0, transparent 3px),
    radial-gradient(circle at 58% 8%, color-mix(in srgb, var(--pa-accent) 55%, transparent) 0, transparent 4px),
    radial-gradient(circle at 70% 88%, color-mix(in srgb, var(--pa-accent) 45%, transparent) 0, transparent 3px),
    radial-gradient(circle at 84% 40%, color-mix(in srgb, var(--pa-accent) 50%, transparent) 0, transparent 5px),
    radial-gradient(circle at 30% 76%, color-mix(in srgb, var(--pa-accent) 40%, transparent) 0, transparent 3px),
    radial-gradient(circle at 5% 52%, color-mix(in srgb, var(--pa-accent) 45%, transparent) 0, transparent 4px);
  opacity: 0.4;
  animation: pa-part-caida 72s linear infinite;
}
@keyframes pa-part-caida { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 60vh, 0); } }
@keyframes pa-part-deriva {
  0%, 100% { transform: translate3d(-0.8%, 0, 0); }
  50%      { transform: translate3d(0.8%, 0, 0); }
}
@media (max-width: 767px), (pointer: coarse) {
  body.power-hud .pa-onda { width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; }
  /* Móvil: la neblina alta queda estática (una capa compuesta menos por
     frame); el movimiento lo dan niebla baja, chispas, partículas y ondas. */
  html:not(#pa-nunca)::before { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.power-hud .pa-onda, body.power-hud .pa-capa, body.power-hud #pa-particulas { animation: none !important; }
  body.power-hud .pa-onda { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * H · INSIGNIAS, TABLAS, SCROLL
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud .power-role-badge {
  border: 1px solid color-mix(in srgb, var(--pa-accent) 40%, rgba(255, 255, 255, 0.1)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--pa-accent) 10%, rgba(8, 6, 11, 0.6)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 12px -6px var(--pa-accent);
}
body.power-hud table thead th {
  border-bottom: 1px solid color-mix(in srgb, var(--pa-accent) 35%, transparent) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.power-hud table tbody tr { transition: background-color var(--pa-fast), box-shadow var(--pa-fast); }
body.power-hud table tbody tr:hover { background-color: color-mix(in srgb, var(--pa-accent) 7%, transparent) !important; box-shadow: inset 3px 0 0 var(--pa-accent); }
body.power-hud ::-webkit-scrollbar { width: 8px; height: 8px; }
body.power-hud ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
body.power-hud ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--pa-accent) 55%, #222), color-mix(in srgb, var(--pa-accent) 25%, #111)); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.6); }
body.power-hud ::-webkit-scrollbar-thumb:hover { background: var(--pa-accent); }

/* ══════════════════════════════════════════════════════════════════════════
 * I · MÓVIL / PWA · cabecera compacta, placas de 44 px
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px), (display-mode: standalone) and (orientation: portrait) {
  body.power-hud header.power-console-header {
    -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
            backdrop-filter: blur(12px) saturate(1.3) !important;
  }
  body.power-hud .power-cta,
  body.power-hud .pw-hextech-btn,
  body.power-hud .btn-primary { --pa-cut: 8px; }
  body.power-hud .power-nav-slot:hover i { animation: none; }
}
@media (pointer: coarse) {
  body.power-hud :is(.filter-btn, .tcg-pill, .ag-chip, .as-tab, .curso-dia-tab, .cat-btn, .roles-tab, .pw-wardrobe-tab, .tcg-filtro-btn, .sim-opt, .boveda-fbtn):hover { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * P · RENDIMIENTO · CERO REPINTADOS EN BUCLE                        (R89)
 * Diagnóstico (sonda r89 a 390 px, antes): 74 nodos con backdrop-filter en
 * el Dashboard sobre un fondo que deriva → cada frame re-difumina 74 cajas;
 * 5 botones del dock animando box-shadow (pw-tac-pulse), 5 celdas del
 * calendario animando box-shadow (pwSundayPulse / calTodayPulse), el brand
 * animando filter (batteryIdleDefault), 6 capas con mix-blend-mode y una
 * estática rodando en pasos + parpadeo. Resultado: 35 fps y frames de
 * 220 ms. Aquí se corta todo lo que repinta:
 *   · box-shadow / filter NO se animan nunca (se sustituyen por estados
 *     estáticos equivalentes; los pulsos que quedan son opacity/transform).
 *   · En pantalla táctil o ≤ 767 px: backdrop-filter sólo en la cabecera
 *     (8 px) y en la tarjeta de los modales (10 px). Tarjetas, pestañas,
 *     chips y pastillas pierden el blur (el vidrio lo da el color
 *     translúcido; el blur sobre fondo oscuro no se percibe y cuesta un
 *     repintado por frame). Los velos de modal dejan de difuminar y oscurecen
 *     un poco más.
 *   · Las órbitas cónicas (--pa-ang, repintan el degradado) sólo corren al
 *     tocar/enfocar en táctil; en reposo el borde neón es estático.
 *   · Las cuatro capas fijas llevan translateZ(0) y animan transform/opacity.
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud .ops-dock-btn,
body.power-hud .ops-dock-btn:hover { animation: none !important; }          /* pw-tac-pulse (box-shadow) */
body.power-hud .ops-dock-btn:not(.pw-tac-crimson):hover { animation: none !important; }   /* pa-glow-pulse (filter) fuera también */
body.power-hud .cal-cell.pw-agenda-sunday,
body.power-hud .cal-cell.is-today { animation: none !important; }         /* pwSundayPulse / calTodayPulse (box-shadow) */
body.power-hud .cal-cell.is-today { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa-accent) 60%, transparent), 0 0 14px -2px var(--pa-accent) !important; }
body.power-hud .power-live-badge.is-maint { animation: pa-maint-blink 2.6s ease-in-out infinite !important; }   /* antes 1.1 s: parpadeo */
@keyframes pa-maint-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
body.power-hud .power-live-badge .pulse-dot { animation-duration: 2.4s !important; }
/* Más repintados en bucle heredados de páginas/power-ui, neutralizados: */
body.power-hud .alumno-card.is-riesgo { animation: none !important; }                     /* alertRiskGlow (border/box-shadow) */
body.power-hud .as-bat.is-master .pw-battery-core { animation: none !important; }         /* masterSolarPulse (filter) */
body.power-hud .tcg-btn-sync { animation: none !important; }                              /* tcgSyncGlow (box-shadow) */
body.power-hud .power-role-badge.is-shine::after {                                        /* power-badge-shine animaba `left` (layout) */
  left: 0 !important;
  transform: translate3d(-160%, 0, 0);
  animation: pa-badge-shine 2.8s ease-in-out infinite !important;
}
@keyframes pa-badge-shine {
  0%   { transform: translate3d(-160%, 0, 0); opacity: 0; }
  15%  { opacity: 1; }
  45%  { transform: translate3d(300%, 0, 0); opacity: 0; }
  100% { transform: translate3d(300%, 0, 0); opacity: 0; }
}

/* R90 · la poda de backdrop-filter pasa a TODOS los viewports: en escritorio
   había 83 (Dashboard) y 104 (Perfil) nodos difuminando sobre un fondo que
   ahora además tiene ondas y partículas en movimiento. Quedan con blur:
   cabecera, tarjeta y velo de modales y la ID Card del Perfil. */
html:not(#pa-nunca) body.power-hud *,
html:not(#pa-nunca) body.power-hud *::before,
html:not(#pa-nunca) body.power-hud *::after {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
html:not(#pa-nunca) body.power-hud header.power-console-header {
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
          backdrop-filter: blur(10px) saturate(1.3) !important;
}
html:not(#pa-nunca) body.power-hud .pf-hero {
  -webkit-backdrop-filter: blur(6px) saturate(1.3) !important;
          backdrop-filter: blur(6px) saturate(1.3) !important;
}
html:not(#pa-nunca) body.power-hud :is(.pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container, .modal-vinculacion-box, .fb-sheet, .install-sheet-panel),
html:not(#pa-nunca) body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
html:not(#pa-nunca) body.power-hud .pw-overlay:not(.hidden) > :not(.pw-backdrop) {
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
          backdrop-filter: blur(12px) saturate(1.18) !important;
}
html:not(#pa-nunca) body.power-hud :is(.pw-backdrop, .power-modal-backdrop, .fb-backdrop, .install-sheet-backdrop),
html:not(#pa-nunca) body.power-hud [id$="-modal"]:not(.hidden) > .absolute.inset-0 {
  -webkit-backdrop-filter: blur(12px) saturate(0.9) !important;
          backdrop-filter: blur(12px) saturate(0.9) !important;
}
@media (max-width: 767px), (pointer: coarse) {
  html:not(#pa-nunca) body.power-hud header.power-console-header {
    background-color: rgba(9, 8, 12, 0.9) !important;
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
  }
  html:not(#pa-nunca) body.power-hud .pf-hero { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* El vidrio de las tarjetas lo pone el color: un punto más opaco sin blur. */
  body.power-hud :is(.power-card, .power-panel, .power-stat-card, .rpg-card, .alumno-card, .curso-card, .as-glass, .pw-game-card) { background-color: rgba(14, 11, 16, 0.9) !important; }
  html[data-power-fx] body.power-hud .pf-section { background-color: color-mix(in srgb, var(--pa-accent) 7%, rgba(12, 7, 10, 0.8)) !important; }
  /* Órbitas sólo al interactuar. */
  body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"])::after { animation: none; }
  body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .pay-btn, .ops-dock-btn.pw-tac-crimson, .tcg-btn-sync, button[class*="bg-[#FF3B30]"], a[class*="bg-[#FF3B30]"], button[class*="bg-red-6"]):is(:active, :focus-visible)::after { animation: pa-orbit 1.6s linear infinite; }
  body.power-hud .power-console-header .power-brand::after { animation-duration: 9s !important; }
  body.power-hud .pf-hero-card-layout::before { animation-duration: 14s; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * B2 · CABECERA MÓVIL · badge MANTENIMIENTO sin montarse sobre nada    (R89)
 * En ≤ 767 px la fila 1 es logo + badge | pill de usuario + campana + mute.
 * Con «MANTENIMIENTO» el badge crece ~2.4× y empujaba/tapaba la pill y los
 * botones. Ahora: el contenedor de marca puede encoger (min-width 0) y el
 * badge se trunca con elipsis antes de invadir; la pill de usuario se
 * acorta a 34 vw con elipsis; campana y mute mantienen 40 px fijos; el
 * badge queda debajo en el orden de apilado (z 1) y los controles arriba
 * (z 2). Nada se monta, nada sale de pantalla.
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.power-hud .power-console-header .power-console-inner { flex-wrap: wrap; row-gap: 6px; }
  body.power-hud .power-console-header .power-header-brand-container { flex: 1 1 0 !important; min-width: 0 !important; gap: 8px !important; overflow: hidden; }
  body.power-hud .power-console-header .power-live-badge {
    position: relative; z-index: 1;
    flex: 0 1 auto; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 8.5px; padding: 2px 6px; letter-spacing: 0.08em;
  }
  body.power-hud .power-console-header .power-live-badge .power-live-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  body.power-hud .power-console-header .power-live-badge.is-maint { font-size: 8px; letter-spacing: 0.04em; padding: 2px 5px; }
  body.power-hud .power-console-header .power-header-end { position: relative; z-index: 2; flex: 0 1 auto !important; min-width: 0; margin-left: auto; gap: 5px !important; }
  body.power-hud .power-console-header .power-session-pill,
  body.power-hud .power-console-header #power-session-user,
  body.power-hud .power-console-header .power-user-pill { flex: 0 1 auto !important; box-sizing: border-box !important; max-width: 27vw !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px !important; letter-spacing: 0.05em !important; padding-left: 6px !important; padding-right: 6px !important; }
  body.power-hud .power-console-header .power-notif-bell,
  body.power-hud .power-console-header .power-mute-btn { flex: 0 0 36px; width: 36px !important; height: 36px !important; min-width: 36px !important; }
  body.power-hud .power-console-header #power-main-nav,
  body.power-hud .power-console-header .power-nav { position: relative; z-index: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * J · ACCESIBILIDAD · movimiento reducido
 * ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body.power-hud .power-console-header .power-brand::after,
  body.power-hud .power-console-header .power-brand::before,
  body.power-hud .power-console-header .power-brand-icon,
  body.power-hud .power-nav-slot.is-active::after,
  body.power-hud .power-nav-slot[aria-current="page"]::after,
  body.power-hud .power-cta::after,
  body.power-hud .pw-hextech-btn::after,
  body.power-hud .btn-primary::after,
  body.power-hud .btn-accent::after,
  body.power-hud .pay-btn::after,
  body.power-hud .power-cta::before,
  body.power-hud .pw-hextech-btn::before,
  body.power-hud .btn-primary::before,
  body.power-hud .btn-accent::before,
  body.power-hud .pay-btn::before,
  body.power-hud .power-mute-btn.is-flash,
  html:not([data-power-fx]):not(#pa-nunca) body.power-hud::before,
  html:not(#pa-nunca)::before,
  html:not(#pa-nunca)::after,
  body.power-hud .power-console-header .power-brand,
  body.power-hud .power-console-header #brand-home,
  body.power-hud .pf-hero::after,
  body.power-hud .pf-hero-card-layout::before,
  body.power-hud .ops-dock-btn:not(.pw-tac-crimson):hover,
  body.power-hud .hud-skin-chip .hud-skin-chip-swatch::after { animation: none !important; }
  body.power-hud :is(.filter-btn, .tcg-pill, .ag-chip, .as-tab, .curso-dia-tab, .cat-btn, .roles-tab, .pw-wardrobe-tab, .tcg-filtro-btn, .sim-opt, .boveda-fbtn):hover { animation: none !important; }
  body.power-hud .power-nav-slot:hover i { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * M · SELECTOR DE SKINS · RENDER DIFERIDO Y CERO FUGAS                (R91)
 * Diagnóstico (sonda r89 a 390 px con el panel de skins abierto, antes):
 * 158 animaciones vivas (32 fichas × 2–4 gotas de lava + destellos + marcos),
 * 88 nodos con mix-blend-mode: screen (cada gota era una superficie de render
 * propia), tres bucles que REPINTAN (lava-aura-equipada: filter;
 * mitica-pulse / legend-pulse: box-shadow; mitica-scan: background-position)
 * y, encima de todo, el velo del modal difuminando la pantalla completa en
 * cada frame → 22 fps, frames de 219 ms, 10 tareas largas: la interfaz
 * «pegada» que reportó Dirección.
 *
 * Ahora:
 *   · VIVAS SÓLO LAS QUE SE MIRAN. Corren la ficha equipada y la que se
 *     toca / enfoca / mantiene; las otras 31 quedan en POSE (play-state
 *     paused conserva el fotograma del delay negativo: cada gota en un sitio
 *     distinto, así que el catálogo no se ve congelado en formación).
 *   · LEJOS = SIN CAPAS. power-skins.js marca con data-pa-lejos las fichas
 *     fuera del viewport: ahí la animación se retira del todo y el compositor
 *     no reserva capas para lo que no se ve (render diferido real).
 *   · SIN FUSIÓN. Las gotas pasan a mezcla normal: la esfera pierde un punto
 *     de brillo aditivo y gana 88 superficies de render menos.
 *   · CERO REPINTADOS. Los tres bucles que repintaban quedan como estado
 *     estático equivalente (el aura de la equipada a mitad de ciclo, el
 *     halo mítico / legendario en su punto medio, las scanlines quietas).
 *     El latido transform de la equipada (r46-equipado-latido) sigue.
 *   · MODAL ABIERTO = CATÁLOGO EN PAUSA. Mientras «Todas las skins» o el
 *     desbloqueo tapan la página (html[data-pa-skins-modal], lo pone
 *     power-skins.js), fichas y hotbar se detienen: nada corre debajo de
 *     un velo que nadie ve.
 * Peso de id (`html:not(#pa-nunca)`) porque power-skins.css fija
 * `animation-play-state: running !important` en (0,4,2) y perfil.html carga
 * su <style> después de esa hoja: es el mismo empate de cascada que ya se
 * resolvió así en A, G y P.
 * ════════════════════════════════════════════════════════════════════════ */
/* 1 · Pose: todo lo que no es equipado ni está bajo el dedo se pausa. */
html:not(#pa-nunca) body.power-hud .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible):not(:active):not(.is-pressed),
html:not(#pa-nunca) body.power-hud .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible):not(:active):not(.is-pressed)::before,
html:not(#pa-nunca) body.power-hud .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible):not(:active):not(.is-pressed)::after,
html:not(#pa-nunca) body.power-hud .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible):not(:active):not(.is-pressed) *,
html:not(#pa-nunca) body.power-hud .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible):not(:active):not(.is-pressed) *::before,
html:not(#pa-nunca) body.power-hud .hud-skin-chip:not(.hud-skin-chip-on):not(:hover):not(:focus-visible):not(:active):not(.is-pressed) *::after {
  animation-play-state: paused !important;
}
/* 2 · Lejos del viewport (lo marca power-skins.js): sin animación, sin capa. */
html:not(#pa-nunca) body.power-hud .hud-skin-chip[data-pa-lejos],
html:not(#pa-nunca) body.power-hud .hud-skin-chip[data-pa-lejos]::before,
html:not(#pa-nunca) body.power-hud .hud-skin-chip[data-pa-lejos]::after,
html:not(#pa-nunca) body.power-hud .hud-skin-chip[data-pa-lejos] *,
html:not(#pa-nunca) body.power-hud .hud-skin-chip[data-pa-lejos] *::before,
html:not(#pa-nunca) body.power-hud .hud-skin-chip[data-pa-lejos] *::after {
  animation: none !important;
  will-change: auto !important;
}
/* 3 · Modal de skins abierto: catálogo y hotbar en pausa (están tapados). */
html:not(#pa-nunca)[data-pa-skins-modal] body.power-hud :is(.hud-skin-chip, .hud-slot, #hud-skin-strip, .hud-hotbar),
html:not(#pa-nunca)[data-pa-skins-modal] body.power-hud :is(.hud-skin-chip, .hud-slot, #hud-skin-strip, .hud-hotbar)::before,
html:not(#pa-nunca)[data-pa-skins-modal] body.power-hud :is(.hud-skin-chip, .hud-slot, #hud-skin-strip, .hud-hotbar)::after,
html:not(#pa-nunca)[data-pa-skins-modal] body.power-hud :is(.hud-skin-chip, .hud-slot, #hud-skin-strip, .hud-hotbar) *,
html:not(#pa-nunca)[data-pa-skins-modal] body.power-hud :is(.hud-skin-chip, .hud-slot, #hud-skin-strip, .hud-hotbar) *::before,
html:not(#pa-nunca)[data-pa-skins-modal] body.power-hud :is(.hud-skin-chip, .hud-slot, #hud-skin-strip, .hud-hotbar) *::after {
  animation-play-state: paused !important;
}
/* 4 · Sin modos de fusión en las gotas (88 superficies de render menos). */
html:not(#pa-nunca) body.power-hud .hud-skin-chip .hud-skin-chip-swatch > i,
html:not(#pa-nunca) body.power-hud .hud-skin-chip .hud-skin-chip-swatch.sk > i {
  mix-blend-mode: normal !important;
  opacity: 0.72;
}
html:not(#pa-nunca) body.power-hud .hud-skin-chip .hud-skin-chip-swatch.sk > i:nth-child(2) { opacity: 0.6; }
html:not(#pa-nunca) body.power-hud .hud-skin-chip .hud-skin-chip-swatch.sk > i:nth-child(3) { opacity: 0.52; }
html:not(#pa-nunca) body.power-hud .hud-skin-chip .hud-skin-chip-swatch.sk > i:nth-child(4) { opacity: 0.45; }
/* 5 · Los tres bucles que repintaban → estado estático equivalente. */
html:not(#pa-nunca) body.power-hud .hud-skin-chip.hud-skin-chip-on .hud-skin-chip-swatch.sk {      /* lava-aura-equipada (filter) */
  animation: none !important;
  will-change: auto !important;
  filter: drop-shadow(0 0 8px var(--sk-hex, #FF3B30)) drop-shadow(0 0 16px color-mix(in srgb, var(--sk-hex, #FF3B30) 40%, transparent)) brightness(1.06);
}
html:not(#pa-nunca) body.power-hud .hud-skin-chip.rarity-legendaria:not(.hud-skin-chip-on) {       /* legend-pulse (box-shadow) */
  animation: none !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.62) !important;
}
html:not(#pa-nunca) body.power-hud .hud-skin-chip.rarity-mitica:not(.hud-skin-chip-on) {           /* mitica-pulse (box-shadow) */
  animation: none !important;
  box-shadow: 0 0 0 1px var(--rarity-glow, #22d3ee), 0 0 15px var(--rarity-glow, #22d3ee), 0 0 24px -4px var(--rarity-border, #ff3b30) !important;
}
html:not(#pa-nunca) body.power-hud .hud-skin-chip.rarity-mitica::before { animation: none !important; }   /* mitica-scan (background-position) */
/* 6 · El velo de los modales CONSERVA su blur (r69 certifica que detrás del
   modal se vea la página difuminada). Se midió quitarlo en táctil y la
   cadencia no cambió: lo que pesa bajo un modal es lo que se pausa arriba. */

/* ══════════════════════════════════════════════════════════════════════════
 * N · NIVEL 0 · PRESUPUESTO DE GPU Y CERO REPINTADOS EN TÁCTIL
 * ──────────────────────────────────────────────────────────────────────────
 * Auditoría (tests/n0_auditoria_capas.mjs, 390×844 a DPR 3):
 *   · Perfil: 79 capas compuestas, 213 MB = 19 pantallas de textura (el
 *     presupuesto de mosaicos de Chrome en Android es 64–128 MB); Dashboard:
 *     190 MB. Culpables: partículas de 160 vh (2 × 20 MB), chispas, neblina y
 *     viñeta fijas (16 + 16 + 11 MB), ondas de 60 vmax (9 MB cada una) y,
 *     detrás de capas fijas animadas, todo el contenido promovido a capa.
 *   · 229 Paint/s en Perfil: pwLiquidEdge (borde cónico de .pf-hero y
 *     .pf-section) y neoLiquidEdge (.pf-section::after) animan una @property
 *     en un conic-gradient — repintado de 390×465…1282 px por frame, ×9
 *     secciones. Medido con Tracing: @property = Paint + Raster por frame.
 *     La regla de rondas anteriores («sólo transform/opacity + @property»)
 *     era falsa en su segunda mitad y se corrige aquí.
 *
 * Con puntero táctil:
 *   · NEBLINA, CHISPAS Y VIÑETA pasan al fondo de <html> (pintado una vez en
 *     la capa raíz: cero texturas). Niebla baja y lienzo de skin de Perfil:
 *     estáticos y en flujo (position absolute, 100 vh) — cero texturas.
 *   · ONDAS: 34 vmax de base (3 MB) con escala final ×2.5 (misma cobertura),
 *     sin var() en los keyframes (tres variantes p1/p2/p3 → compositor).
 *   · PARTÍCULAS: una capa de 100 vw × 130 vh con mosaico de 30 vh (15 MB
 *     en vez de 39) y sin deriva del contenedor.
 *   · ÓRBITAS CÓNICAS (@property) quietas: batería de la cabecera, bordes
 *     líquidos de Perfil y hotbar. Se encienden sólo al tocar (placas).
 *   · CABECERA sin backdrop-filter (fondo al 94 %): fuera la superficie de
 *     lectura por frame sobre ondas y partículas.
 * Medido después: Perfil ≈ 5 pantallas, Dashboard ≈ 4; 0 Paint/s en reposo.
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes pa-onda-1 { 0% { transform: scale(0.15) translateZ(0); opacity: 0; } 8% { opacity: 0.20; } 55% { opacity: 0.08; } 100% { transform: scale(2.6) translateZ(0); opacity: 0; } }
@keyframes pa-onda-2 { 0% { transform: scale(0.15) translateZ(0); opacity: 0; } 8% { opacity: 0.30; } 55% { opacity: 0.12; } 100% { transform: scale(2.6) translateZ(0); opacity: 0; } }
@keyframes pa-onda-3 { 0% { transform: scale(0.15) translateZ(0); opacity: 0; } 8% { opacity: 0.38; } 55% { opacity: 0.15; } 100% { transform: scale(2.6) translateZ(0); opacity: 0; } }
@keyframes pa-onda-1m { 0% { transform: scale(0.15) translateZ(0); opacity: 0; } 8% { opacity: 0.20; } 55% { opacity: 0.08; } 100% { transform: scale(6.5) translateZ(0); opacity: 0; } }
@keyframes pa-onda-2m { 0% { transform: scale(0.15) translateZ(0); opacity: 0; } 8% { opacity: 0.30; } 55% { opacity: 0.12; } 100% { transform: scale(6.5) translateZ(0); opacity: 0; } }
@keyframes pa-onda-3m { 0% { transform: scale(0.15) translateZ(0); opacity: 0; } 8% { opacity: 0.38; } 55% { opacity: 0.15; } 100% { transform: scale(6.5) translateZ(0); opacity: 0; } }
@keyframes pa-part-caida-m { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 30vh, 0); } }
body.power-hud .pa-onda { animation-name: pa-onda-2; }
body.power-hud .pa-onda.p1 { animation-name: pa-onda-1; }
body.power-hud .pa-onda.p3 { animation-name: pa-onda-3; }
/* pw-page-in (power-ui) termina en identidad pero con fill `both`: Chrome la
   considera activa para siempre y promueve la página ENTERA a una capa
   compuesta (43 MB en el Dashboard). `backwards` la suelta al terminar. */
body.power-hud .power-page, body.power-hud main.power-page, body.power-hud > main, body.power-hud .power-page-shell { animation-fill-mode: backwards; }

@media (pointer: coarse) {
  /* 1 · Atmósfera estática al fondo de <html>: neblina + chispas + viñeta. */
  html:not(#pa-nunca)::before,
  html:not(#pa-nunca)::after,
  html:not(#pa-nunca) body.power-hud::after { display: none !important; }
  html:not(#pa-nunca) {
    background-image:
      radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--pa-accent) 10%, transparent), transparent 70%),
      radial-gradient(160px 160px at 12% 18%, color-mix(in srgb, var(--pa-accent) 11%, transparent), transparent 70%),
      radial-gradient(120px 120px at 82% 24%, color-mix(in srgb, var(--pa-accent) 8%, transparent), transparent 70%),
      radial-gradient(220px 220px at 60% 78%, color-mix(in srgb, var(--pa-accent) 7%, transparent), transparent 70%),
      radial-gradient(90px 90px at 30% 64%, color-mix(in srgb, var(--pa-accent) 9%, transparent), transparent 70%),
      radial-gradient(3px 3px at 21% 31%, rgba(255, 255, 255, 0.35), transparent 100%),
      radial-gradient(2.5px 2.5px at 71% 58%, rgba(255, 255, 255, 0.3), transparent 100%),
      radial-gradient(3px 3px at 86% 40%, rgba(255, 255, 255, 0.35), transparent 100%),
      radial-gradient(90% 55% at 50% -12%, color-mix(in srgb, var(--pa-accent) 11%, transparent), transparent 62%),
      radial-gradient(55% 40% at 102% 104%, color-mix(in srgb, var(--pa-accent) 8%, transparent), transparent 62%),
      radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 30%, rgba(0, 0, 0, 0.35) 100%);
  }
  /* 2 · Niebla baja (interiores) y lienzo de skin (Perfil): estáticos, en flujo, sin capa. */
  html:not(#pa-nunca):not([data-power-fx]) body.power-hud::before,
  html:not(#pa-nunca)[data-power-fx] body.power-hud::before {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: -1 !important;
    transform: none !important;
    will-change: auto !important;
    animation: none !important;
  }
  /* 3 · Ondas pequeñas (la textura se rasteriza al tamaño base), tope 2 (JS). */
  body.power-hud .pa-onda { width: 34vmax; height: 34vmax; margin: -17vmax 0 0 -17vmax; animation-name: pa-onda-2m; }
  body.power-hud .pa-onda.p1 { animation-name: pa-onda-1m; }
  body.power-hud .pa-onda.p3 { animation-name: pa-onda-3m; }
  /* 4 · Partículas: una capa de 130 vh, mosaico de 30 vh, sin deriva del contenedor. */
  body.power-hud #pa-particulas { animation: none !important; }
  body.power-hud .pa-capa-b { display: none !important; }
  body.power-hud .pa-capa-a { left: 0; right: 0; top: -30vh; height: 130vh; background-size: 100% 30vh; animation: pa-part-caida-m 24s linear infinite; }
  /* 5 · Órbitas cónicas (@property → repintado por frame) quietas en reposo. */
  body.power-hud .power-console-header .power-brand::after { animation: none !important; }
  html:not(#pa-nunca)[data-power-fx] body.power-hud :is(.pf-hero, .pf-section),
  html:not(#pa-nunca)[data-power-family] body.power-hud .pf-section::after,
  html:not(#pa-nunca)[data-power-fx] body.power-hud .hud-slot,
  html:not(#pa-nunca)[data-power-fx] body.power-hud .hud-slot::after,
  html:not(#pa-nunca)[data-power-fx] body.power-hud .hud-slot::before,
  html:not(#pa-nunca)[data-power-fx] body.power-hud .pf-section::before { animation-name: none !important; }   /* pwCellCore: una capa de sección entera por latido */
  /* 6 · Cabecera: fondo opaco, sin lectura de fondo por frame. */
  html:not(#pa-nunca) body.power-hud header.power-console-header {
    background-color: rgba(9, 8, 12, 0.94) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * N · MODALES DE LA PWA (TÁCTIL) SIN BACKDROP-FILTER
 * Velo y tarjeta de los modales dejaban dos superficies de lectura de
 * pantalla completa por frame; con la GPU al límite Chrome las rasteriza
 * vacías (el modal «desaparece»). En táctil: velo oscuro plano y tarjeta de
 * vidrio casi opaco por tinte. En escritorio (puntero fino) se conserva el
 * vidrio de r69. Orden de apilado explícito: velo 0 → tarjeta 1 dentro del
 * overlay; el overlay conserva el z-index que le da cada página.
 * ════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  html:not(#pa-nunca) body.power-hud :is(.pw-backdrop, .power-modal-backdrop, .fb-backdrop, .install-sheet-backdrop),
  html:not(#pa-nunca) body.power-hud [id$="-modal"]:not(.hidden) > .absolute.inset-0 {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    background-color: rgba(4, 3, 7, 0.84) !important;
  }
  html:not(#pa-nunca) body.power-hud :is(.pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container, .modal-vinculacion-box, .fb-sheet, .install-sheet-panel),
  html:not(#pa-nunca) body.power-hud [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
  html:not(#pa-nunca) body.power-hud .pw-overlay:not(.hidden) > :not(.pw-backdrop) {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    background-color: color-mix(in srgb, var(--pa-accent) 8%, rgba(10, 7, 12, 0.96)) !important;
    position: relative;
    z-index: 1;
  }
  html:not(#pa-nunca) body.power-hud :is(.pw-backdrop, .power-modal-backdrop) { z-index: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * O · MODO HORIZONTAL EN TELÉFONO (interiores) · N3 → N8
 * Dos caminos, los dos automáticos (N8: el botón de rotación se retiró):
 *   MONITOR   power-orient.js virtualiza el viewport a 1024 px (initial-scale =
 *             ancho físico / 1024): la página se maqueta como un monitor de
 *             escritorio (cabecera de 64 px, pestañas con texto, rejillas) y se
 *             escala proporcionalmente. Aquí sólo se ajustan los modales al
 *             alto disponible, se evita el desborde horizontal y se agrandan
 *             los controles para el dedo (los 44 px físicos de siempre).
 *   CONSOLA   si el viewport no se pudo virtualizar (viewport CSS < 1000 px),
 *             la barra superior es UNA fila de 55 px: logo + LIVE/MANTENIMIENTO,
 *             la tira COMPLETA de pestañas centrada (texto si cabe; si no,
 *             html[data-pa-nav="icons"] → sólo icono) y campana · usuario ·
 *             mute. Selectores con html:not(#pa-nunca) para ganar a las reglas
 *             de escritorio (≥ 768 px) de power-ui.css. (min-aspect-ratio: 4/3)
 *             evita que el teclado en vertical dispare la consola.
 * ════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-aspect-ratio: 4/3) and (max-height: 520px) and (max-width: 999px) {
html:not(#pa-nunca) body.power-hud header.power-console-header { height: calc(55px + env(safe-area-inset-top, 0px)) !important; min-height: calc(55px + env(safe-area-inset-top, 0px)) !important; max-height: calc(55px + env(safe-area-inset-top, 0px)) !important; padding: env(safe-area-inset-top, 0px) 0 0 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-console-inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; height: 55px !important; min-height: 0 !important; max-height: 55px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 max(0.6rem, env(safe-area-inset-right, 0px)) 0 max(0.6rem, env(safe-area-inset-left, 0px)) !important; gap: 0.5rem !important; row-gap: 0 !important; box-sizing: border-box !important; position: relative !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-header-brand-container { order: 0 !important; flex: 1 1 0% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; min-width: max-content !important; max-width: none !important; width: auto !important; gap: 0.4rem !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-brand { flex: 0 0 auto !important; margin: 0 !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-live-badge { flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 8px !important; letter-spacing: 0.05em !important; padding: 2px 6px !important; margin: 0 !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-live-badge.is-maint { font-size: 7.5px !important; letter-spacing: 0.03em !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header #power-header-tools, html:not(#pa-nunca) body.power-hud header.power-console-header .power-header-tools { display: contents !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header #power-main-nav, html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav { order: 2 !important; flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: 55px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 0.15rem !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; position: static !important; transform: none !important; left: auto !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header #power-main-nav .power-nav-slot, html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot { flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0.15rem !important; padding: 0 0.3rem !important; margin: 0 !important; font-size: 0.5rem !important; letter-spacing: 0.02em !important; line-height: 1 !important; white-space: nowrap !important; border-radius: 0.5rem !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot .power-nav-icon, html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot > svg, html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot > i { flex: 0 0 auto !important; width: 12px !important; height: 12px !important; font-size: 12px !important; line-height: 1 !important; margin: 0 !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot .label { display: inline-block !important; flex: 0 0 auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; font-size: 0.5rem !important; letter-spacing: 0.02em !important; line-height: 1 !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot .label-full { display: inline !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot .label-short { display: none !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-header-end { order: 3 !important; flex: 1 1 0% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; min-width: max-content !important; gap: 0.3rem !important; margin: 0 !important; padding: 0 !important; position: static !important; width: auto !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-header-actions, html:not(#pa-nunca) body.power-hud header.power-console-header #power-header-actions { order: 4 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 0.3rem !important; margin: 0 !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-header-actions:empty, html:not(#pa-nunca) body.power-hud header.power-console-header #power-header-actions:empty { display: none !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-session-pill, html:not(#pa-nunca) body.power-hud header.power-console-header #power-session-user, html:not(#pa-nunca) body.power-hud header.power-console-header .power-user-pill { flex: 0 1 auto !important; box-sizing: border-box !important; max-width: 7.5rem !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 8.5px !important; letter-spacing: 0.05em !important; padding: 4px 8px !important; margin: 0 !important; height: auto !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-notif-bell, html:not(#pa-nunca) body.power-hud header.power-console-header .power-mute-btn, html:not(#pa-nunca) body.power-hud header.power-console-header #power-mute-btn, html:not(#pa-nunca) body.power-hud header.power-console-header #power-notif-bell { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
html:not(#pa-nunca) body.power-hud > main, html:not(#pa-nunca) body.power-hud main.power-page, html:not(#pa-nunca) body.power-hud .power-page, html:not(#pa-nunca) body.power-hud .power-page-shell, html:not(#pa-nunca) body.power-hud main.perfil-page { padding-top: 0.7rem !important; padding-bottom: 0.9rem !important; padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; box-sizing: border-box !important; }
html:not(#pa-nunca) body.power-hud .space-y-6 > :not([hidden]) ~ :not([hidden]), html:not(#pa-nunca) body.power-hud .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
html:not(#pa-nunca) body.power-hud .space-y-4 > :not([hidden]) ~ :not([hidden]), html:not(#pa-nunca) body.power-hud .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.6rem !important; }
html:not(#pa-nunca) body.power-hud .mb-6, html:not(#pa-nunca) body.power-hud .mb-8, html:not(#pa-nunca) body.power-hud .mb-10 { margin-bottom: 0.75rem !important; }
html:not(#pa-nunca) body.power-hud .mt-6, html:not(#pa-nunca) body.power-hud .mt-8, html:not(#pa-nunca) body.power-hud .mt-10 { margin-top: 0.75rem !important; }
html:not(#pa-nunca) body.power-hud .py-6, html:not(#pa-nunca) body.power-hud .py-8 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
html:not(#pa-nunca) body.power-hud .gap-6, html:not(#pa-nunca) body.power-hud .gap-8 { gap: 0.75rem !important; }
html:not(#pa-nunca) body.power-hud .pf-section, html:not(#pa-nunca) body.power-hud .pf-hero, html:not(#pa-nunca) body.power-hud #personalizacion-hotbar-section { margin-bottom: 0.7rem !important; }
html:not(#pa-nunca) body.power-hud .pf-hero { padding: 0.8rem 1rem !important; }
html:not(#pa-nunca) body.power-hud .pf-section { padding: 0.8rem 0.9rem !important; }
html:not(#pa-nunca) body.power-hud :is(.power-card, .power-panel, .power-stat-card, .rpg-card, .alumno-card, .curso-card, .as-glass, .pw-game-card, .pw-panel) { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
html:not(#pa-nunca) body.power-hud .power-page > .grid, html:not(#pa-nunca) body.power-hud main > .grid, html:not(#pa-nunca) body.power-hud .power-page section > .grid { gap: 0.7rem !important; }
html:not(#pa-nunca) body.power-hud main.perfil-page, html:not(#pa-nunca) body.power-hud .perfil-page { max-width: min(100%, 42rem) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; }
html:not(#pa-nunca) body.power-hud main.perfil-page section.pf-hero, html:not(#pa-nunca) body.power-hud main.perfil-page .pf-section, html:not(#pa-nunca) body.power-hud main.perfil-page .pf-search-wrap { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (orientation: landscape) and (min-aspect-ratio: 4/3) and (max-height: 520px) and (max-width: 799px) {
html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot .label { display: none !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header #power-main-nav .power-nav-slot, html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot { flex: 0 0 auto !important; padding: 0 0.5rem !important; }
html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot .power-nav-icon, html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot > svg, html:not(#pa-nunca) body.power-hud header.power-console-header .power-nav-slot > i { width: 15px !important; height: 15px !important; font-size: 15px !important; }
}
@media (max-height: 520px) and (max-width: 999px) {
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header { height: calc(55px + env(safe-area-inset-top, 0px)) !important; min-height: calc(55px + env(safe-area-inset-top, 0px)) !important; max-height: calc(55px + env(safe-area-inset-top, 0px)) !important; padding: env(safe-area-inset-top, 0px) 0 0 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-console-inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; height: 55px !important; min-height: 0 !important; max-height: 55px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 max(0.6rem, env(safe-area-inset-right, 0px)) 0 max(0.6rem, env(safe-area-inset-left, 0px)) !important; gap: 0.5rem !important; row-gap: 0 !important; box-sizing: border-box !important; position: relative !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-header-brand-container { order: 0 !important; flex: 1 1 0% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; min-width: max-content !important; max-width: none !important; width: auto !important; gap: 0.4rem !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-brand { flex: 0 0 auto !important; margin: 0 !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-live-badge { flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 8px !important; letter-spacing: 0.05em !important; padding: 2px 6px !important; margin: 0 !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-live-badge.is-maint { font-size: 7.5px !important; letter-spacing: 0.03em !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-header-tools, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-header-tools { display: contents !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-main-nav, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav { order: 2 !important; flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: 55px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 0.15rem !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; position: static !important; transform: none !important; left: auto !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-main-nav .power-nav-slot, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot { flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0.15rem !important; padding: 0 0.3rem !important; margin: 0 !important; font-size: 0.5rem !important; letter-spacing: 0.02em !important; line-height: 1 !important; white-space: nowrap !important; border-radius: 0.5rem !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot .power-nav-icon, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot > svg, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot > i { flex: 0 0 auto !important; width: 12px !important; height: 12px !important; font-size: 12px !important; line-height: 1 !important; margin: 0 !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot .label { display: inline-block !important; flex: 0 0 auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; font-size: 0.5rem !important; letter-spacing: 0.02em !important; line-height: 1 !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot .label-full { display: inline !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot .label-short { display: none !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-header-end { order: 3 !important; flex: 1 1 0% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; min-width: max-content !important; gap: 0.3rem !important; margin: 0 !important; padding: 0 !important; position: static !important; width: auto !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-header-actions, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-header-actions { order: 4 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 0.3rem !important; margin: 0 !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-header-actions:empty, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-header-actions:empty { display: none !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-session-pill, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-session-user, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-user-pill { flex: 0 1 auto !important; box-sizing: border-box !important; max-width: 7.5rem !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 8.5px !important; letter-spacing: 0.05em !important; padding: 4px 8px !important; margin: 0 !important; height: auto !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-notif-bell, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-mute-btn, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-mute-btn, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-notif-bell { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud > main, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud main.power-page, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .power-page, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .power-page-shell, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud main.perfil-page { padding-top: 0.7rem !important; padding-bottom: 0.9rem !important; padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; box-sizing: border-box !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .space-y-6 > :not([hidden]) ~ :not([hidden]), html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .space-y-4 > :not([hidden]) ~ :not([hidden]), html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.6rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .mb-6, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .mb-8, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .mb-10 { margin-bottom: 0.75rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .mt-6, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .mt-8, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .mt-10 { margin-top: 0.75rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .py-6, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .py-8 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .gap-6, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .gap-8 { gap: 0.75rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .pf-section, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .pf-hero, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud #personalizacion-hotbar-section { margin-bottom: 0.7rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .pf-hero { padding: 0.8rem 1rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .pf-section { padding: 0.8rem 0.9rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud :is(.power-card, .power-panel, .power-stat-card, .rpg-card, .alumno-card, .curso-card, .as-glass, .pw-game-card, .pw-panel) { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .power-page > .grid, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud main > .grid, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .power-page section > .grid { gap: 0.7rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud main.perfil-page, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud .perfil-page { max-width: min(100%, 42rem) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud main.perfil-page section.pf-hero, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud main.perfil-page .pf-section, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud main.perfil-page .pf-search-wrap { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (max-height: 520px) and (max-width: 799px) {
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot .label { display: none !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header #power-main-nav .power-nav-slot, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot { flex: 0 0 auto !important; padding: 0 0.5rem !important; }
html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot .power-nav-icon, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot > svg, html:not(#pa-nunca)[data-pa-orient="landscape"] body.power-hud header.power-console-header .power-nav-slot > i { width: 15px !important; height: 15px !important; font-size: 15px !important; }
}
/* Ajuste por medida (power-orient.js): si la tira completa con texto no cabe en la barra,
   html[data-pa-nav="icons"] → sólo icono; en cuanto cabe, vuelve el texto. */
html:not(#pa-nunca)[data-pa-nav="icons"] body.power-hud header.power-console-header .power-nav-slot .label { display: none !important; }
html:not(#pa-nunca)[data-pa-nav="icons"] body.power-hud header.power-console-header #power-main-nav .power-nav-slot, html:not(#pa-nunca)[data-pa-nav="icons"] body.power-hud header.power-console-header .power-nav-slot { flex: 0 0 auto !important; padding: 0 0.5rem !important; }
html:not(#pa-nunca)[data-pa-nav="icons"] body.power-hud header.power-console-header .power-nav-slot .power-nav-icon, html:not(#pa-nunca)[data-pa-nav="icons"] body.power-hud header.power-console-header .power-nav-slot > svg, html:not(#pa-nunca)[data-pa-nav="icons"] body.power-hud header.power-console-header .power-nav-slot > i { width: 15px !important; height: 15px !important; font-size: 15px !important; }
/* ── MONITOR (viewport virtual 1024–1280 px, escalado al ancho físico) ───────
   --pa-escala la escribe power-orient.js (ancho físico / ancho virtual). Todo lo
   que se toca con el dedo se mide en px FÍSICOS: calc(Npx / var(--pa-escala)).
   Lo demás se COMPACTA (N9): padding, márgenes, títulos y KPIs más pequeños,
   definidos, «toda la información de golpe» como en una laptop. */
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud { overflow-x: hidden !important; --pa-toque: calc(40px / var(--pa-escala, 1)); --pa-texto-toque: calc(10.5px / var(--pa-escala, 1)); }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud main, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-page { overflow-x: clip; }
/* Modales: nunca más altos que el viewport escalado; el cuerpo hace scroll dentro. */
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.pw-overlay:not(.hidden) > :not(.pw-backdrop), [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop), .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container, dialog[open], .modal-vinculacion-box, .exito-sheet, .exito-card, .boveda-panel, .hud-mision-sheet, .mc-panel, .pp-modal-caja) {
  max-height: calc(100dvh - 1.25rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important; overscroll-behavior: contain; box-sizing: border-box;
}
/* Cabecera: 48 px físicos, pestañas de 36 px físicos con texto legible (≥ 10.5 px físicos). */
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud header.power-console-header { height: calc(48px / var(--pa-escala, 1)) !important; min-height: calc(48px / var(--pa-escala, 1)) !important; max-height: calc(48px / var(--pa-escala, 1)) !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud header.power-console-header .power-console-inner { height: 100% !important; max-height: none !important; min-height: 0 !important; padding: 0 1rem !important; max-width: none !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud header.power-console-header #power-main-nav .power-nav-slot, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-nav-slot { height: calc(36px / var(--pa-escala, 1)) !important; min-height: calc(36px / var(--pa-escala, 1)) !important; padding: 0 9px !important; gap: 6px !important; font-size: calc(9.5px / var(--pa-escala, 1)) !important; letter-spacing: 0.02em !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud header.power-console-header #power-main-nav { gap: 4px !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud header.power-console-header .power-nav-slot .power-nav-icon, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud header.power-console-header .power-nav-slot > svg { width: calc(14px / var(--pa-escala, 1)) !important; height: calc(14px / var(--pa-escala, 1)) !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-notif-bell, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-mute-btn { width: calc(38px / var(--pa-escala, 1)) !important; height: calc(38px / var(--pa-escala, 1)) !important; min-width: calc(38px / var(--pa-escala, 1)) !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-session-pill, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud #power-session-user { min-height: calc(32px / var(--pa-escala, 1)) !important; font-size: calc(8.5px / var(--pa-escala, 1)) !important; max-width: 16rem !important; padding: 4px 12px !important; }
/* Botones, chips, campos: área táctil de 40 px físicos, texto ≥ 10.5 px físicos. */
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.power-cta, .pw-hextech-btn, .btn-primary, .btn-accent, .filter-btn, .ag-chip, .rol-chip, .cat-btn, .pay-btn, .hud-slot, .tcg-btn-sync, .ops-dock-btn, .power-toolbar button, .power-section-head button, .power-section-head a, [id$="-modal"] button:not([aria-label^="Cerrar"]), .pw-panel button:not([aria-label^="Cerrar"])) { min-height: var(--pa-toque); font-size: max(0.78rem, var(--pa-texto-toque)); }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { min-height: var(--pa-toque); font-size: max(0.9rem, calc(12px / var(--pa-escala, 1))); }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.pw-overlay, [id$="-modal"], .pw-panel, dialog) [aria-label^="Cerrar"] { width: var(--pa-toque) !important; height: var(--pa-toque) !important; min-width: var(--pa-toque) !important; }
/* Compactación: márgenes y rellenos de laptop. */
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud main.power-page, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-page, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud > main, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud main.perfil-page { padding-top: 0.7rem !important; padding-bottom: 1rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-section-head, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-page-head { margin-bottom: 0.6rem !important; gap: 0.6rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-section-head h1, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-section-head h2, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-page-head h1, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .power-page-head h2 { font-size: 1.3rem !important; line-height: 1.15 !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.p-6, .p-5, [class~="lg:p-6"], [class~="lg:p-5"], [class~="sm:p-6"]) { padding: 0.85rem 1.1rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .p-4, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .p-3 { padding: 0.65rem 0.85rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.mb-5, .mb-6, .mb-8, .mb-10) { margin-bottom: 0.7rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.mt-5, .mt-6, .mt-8, .mt-10) { margin-top: 0.7rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.py-5, .py-6, .py-8) { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.gap-3, .gap-4) { gap: 0.6rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.gap-5, .gap-6, .gap-8) { gap: 0.8rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.space-y-4, .space-y-5, .space-y-6, .space-y-8) > :not([hidden]) ~ :not([hidden]) { margin-top: 0.65rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.text-4xl, .text-5xl, [class~="sm:text-5xl"], [class~="md:text-5xl"], [class~="lg:text-6xl"]) { font-size: 1.9rem !important; line-height: 1.1 !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.text-3xl, [class~="sm:text-4xl"]) { font-size: 1.5rem !important; line-height: 1.15 !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud :is(.power-card, .power-panel, .power-stat-card, .power-monitor, .pf-section, .pf-hero, .rpg-card, .alumno-card, .curso-card, .as-glass, .ag-battlepass, #hero-finance) { padding: 0.8rem 1rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud #hero-finance { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; row-gap: 0.15rem; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud #hero-finance > .power-label { flex: 0 0 100%; margin-bottom: 0.15rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .ops-dock-btn { padding: 0.45rem 0.75rem !important; }
html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .pf-hero .pf-avatar, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .pf-hero .pf-hero-avatar, html:not(#pa-nunca)[data-pa-orient="monitor"] body.power-hud .pf-hero-gamer .pf-avatar-ring { width: 5.2rem !important; height: 5.2rem !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * O2 · OVERLAYS DE CARGA Y AVISOS · siempre centrados en el lienzo
 * El cargador (#power-loader), los avisos de PowerFX y el velo de inmersión
 * se anclan al centro del contenedor (50 % / translate) y nunca miden más
 * que él: ni desfase a la derecha ni desborde, también en el lienzo virtual.
 * ════════════════════════════════════════════════════════════════════════ */
body.power-hud #power-loader, body.power-hud .power-loader {
  inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important;
}
body.power-hud .pwfx-toasts { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(92%, 26rem) !important; max-width: calc(100% - 1rem) !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * Q · N6 · PANTALLA COMPLETA BORDE A BORDE (viewport-fit=cover)
 * Las páginas llevan viewport-fit=cover y la PWA es standalone con
 * orientation:any: el documento se extiende bajo el notch, la barra de
 * estado y el indicador de inicio. El fondo lo pone <html> (sección A,
 * background-attachment: fixed) → nunca hay franjas blancas ni negras. Las
 * zonas seguras se ocupan así: <body> absorbe izquierda · derecha · abajo
 * (el contenido en flujo nunca queda bajo el notch lateral ni bajo la barra
 * de inicio) y la cabecera sticky absorbe la de arriba (su vidrio cubre la
 * zona de la barra de estado y sigue pegada al borde real). Las capas fijas
 * (fondo, ondas, modales, avisos) siguen cubriendo el 100 % del viewport.
 * En el lienzo virtual los insets los gira #pa-lienzo (power-orient.js).
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca) body.power-hud {
  padding-top: 0 !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  box-sizing: border-box;
  min-height: 100dvh;
}
html:not(#pa-nunca) body.power-hud header.power-console-header { padding-top: env(safe-area-inset-top, 0px) !important; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════════
 * T · N8 · LIMPIEZA DE ROJOS HEREDADOS (skins ≠ Power)
 * power-ui.css y los <style> de cada página traen decenas de rojos FIJOS
 * (#FF3B30 / #E50914 / rgb 239 68 68) que eran «el acento» cuando sólo
 * existía la skin Power: corchetes de esquina, divisores, barras de
 * progreso, marcos de avatar, foco, chips activos, hover… Con otra skin
 * equipada quedaban como rendijas y bordes rojos sueltos. Aquí, sólo con una
 * skin distinta de Power, cada uno de esos rojos DECORATIVOS pasa a
 * --pa-accent. Los rojos SEMÁNTICOS no se tocan: Company (carmesí por
 * regla de negocio), riesgo / impago / cancelado / falta, mantenimiento,
 * errores, anular/eliminar.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-card::before,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-panel::before {
  background:
    linear-gradient(var(--pa-accent), var(--pa-accent)) top left / 14px 2px no-repeat,
    linear-gradient(var(--pa-accent), var(--pa-accent)) top left / 2px 14px no-repeat,
    linear-gradient(color-mix(in srgb, var(--pa-accent) 50%, transparent), color-mix(in srgb, var(--pa-accent) 50%, transparent)) top right / 12px 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--pa-accent) 50%, transparent), color-mix(in srgb, var(--pa-accent) 50%, transparent)) top right / 1px 12px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) bottom left / 10px 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) bottom left / 1px 10px no-repeat !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .rpg-card::before,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .company-rpg-card::before,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .rounded-3xl.border.border-zinc-800::before,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .rounded-2xl.border.border-zinc-800::before {
  background:
    linear-gradient(var(--pa-accent), var(--pa-accent)) top left / 12px 2px no-repeat,
    linear-gradient(var(--pa-accent), var(--pa-accent)) top left / 2px 12px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) bottom right / 10px 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) bottom right / 1px 10px no-repeat !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-divider { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pa-accent) 35%, transparent), var(--power-border), transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-progress-bar-fill,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .pf-stat-bar-track > i,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ag-bp-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pa-accent) 62%, #000), var(--pa-accent) 55%, color-mix(in srgb, var(--pa-accent) 70%, #fff)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pa-accent) 40%, transparent) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-thermo-fill:not(.lvl-low) { box-shadow: 0 0 10px color-mix(in srgb, var(--pa-accent) 35%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-empty .mission,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .cursos-terminal-prefix span,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .cursos-empty-hud .tag,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .pf-hist-item .pf-hist-tok,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .pf-stat-card.is-tokens .pf-stat-big,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .pf-stat-card.is-tokens .pf-stat-icon,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-fx-toast.achievement::before,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .checkin-reward .bolt,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class~="text-[#FF3B30]"],
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class~="text-[#E50914]"] { color: var(--pa-accent) !important; text-shadow: 0 0 14px color-mix(in srgb, var(--pa-accent) 35%, transparent); }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .pf-stat-card.is-tokens {
  border-color: color-mix(in srgb, var(--pa-accent) 45%, #27272a) !important;
  background-image: radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in srgb, var(--pa-accent) 14%, transparent), transparent 70%) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--pa-accent) 12%, transparent) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud :focus-visible { outline-color: color-mix(in srgb, var(--pa-accent) 55%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-search:focus,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ren-input:focus {
  border-color: color-mix(in srgb, var(--pa-accent) 50%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-accent) 12%, transparent) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-mute-btn:hover,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .rpg-card:not(.is-riesgo):not(.is-unpaid):not(.is-company):hover,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .chip-curso:hover,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .rol-chip:hover { border-color: color-mix(in srgb, var(--pa-accent) 55%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .rpg-avatar-frame,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .profe-avatar-slot { background: linear-gradient(145deg, color-mix(in srgb, var(--pa-accent) 45%, transparent), #3f3f46 45%, #18181b) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .alu-list-avatar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa-accent) 22%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-led-reward::after {
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--pa-accent) 15%, transparent) 20%, color-mix(in srgb, var(--pa-accent) 45%, transparent) 50%, color-mix(in srgb, var(--pa-accent) 15%, transparent) 80%, transparent 100%) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .checkin-reward .bolt {
  background: color-mix(in srgb, var(--pa-accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--pa-accent) 45%, transparent) !important;
  box-shadow: 0 0 40px color-mix(in srgb, var(--pa-accent) 35%, transparent) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-loader-bolt,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud #power-loader .power-loader-bolt,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-progress-ring svg,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .hud-slot-outfit-icon,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .hud-slot-pet-silhouette { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pa-accent) 45%, transparent)) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .power-fx-toast.achievement {
  border-color: color-mix(in srgb, var(--pa-accent) 65%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pa-accent) 22%, transparent), transparent 50%), rgba(18, 18, 20, 0.96) !important;
}
/* Perfil: la puerta del hábitat y la burbuja de la mascota siguen el acento (companion.js las pintaba en línea). */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .hud-habitat-door {
  border-color: color-mix(in srgb, var(--pa-accent) 62%, #3f3f46) !important;
  box-shadow: inset 0 -8px 12px color-mix(in srgb, var(--pa-accent) 30%, transparent), 0 0 12px color-mix(in srgb, var(--pa-accent) 28%, transparent) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .pet-speech-bubble { border-color: color-mix(in srgb, var(--pa-accent) 25%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .hud-pet-chip.hud-pet-chip-active {
  border-color: var(--pa-accent) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--pa-accent) 45%, transparent) !important;
}
/* Chips y botones ACTIVOS de cada página (estado, no semántica) */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ag-chip.is-on:not(#chip-company),
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .rol-chip.is-active,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ren-metodo-btn.is-active,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .pay-btn.active,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ag-evt-cats label:has(input:checked) {
  border-color: color-mix(in srgb, var(--pa-accent) 65%, transparent) !important;
  background: color-mix(in srgb, var(--pa-accent) 14%, transparent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--pa-accent) 25%, transparent) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .cat-btn.active,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud #ficha-historial .hist-cta,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class~="bg-[#FF3B30]"]:not(button):not(a) {
  background-color: var(--pa-accent) !important; border-color: var(--pa-accent) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .cal-cell.is-today {
  border-color: var(--pa-accent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pa-accent) 50%, transparent), 0 0 8px rgba(245, 158, 11, 0.28) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ag-checkin-btn {
  border-color: color-mix(in srgb, var(--pa-accent) 50%, transparent) !important;
  background: linear-gradient(160deg, var(--pa-accent), color-mix(in srgb, var(--pa-accent) 45%, #000)) !important;
}
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud #ficha-historial .hist-venta-row:hover,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud #ficha-historial .hist-venta-row:focus-visible {
  border-color: var(--pa-accent) !important; outline-color: color-mix(in srgb, var(--pa-accent) 35%, transparent) !important;
}
/* Power Link (dashboard) y contadores TCG: el brillo táctico sigue el acento. */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ops-dock-btn.pw-tac-plink { --pw-tac-glow: color-mix(in srgb, var(--pa-accent) 55%, transparent); }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud .ops-dock-plink-main { text-shadow: 0 0 10px color-mix(in srgb, var(--pa-accent) 45%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud #tcg-badge-count,
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud #tcg-contador-wrap {
  background: color-mix(in srgb, var(--pa-accent) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--pa-accent) 65%, transparent) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--pa-accent) 40%, transparent) !important;
}
/* Utilidades Tailwind con rojo fijo en el marcado (variantes /NN → 35 % del acento). */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class~="border-[#FF3B30]"],
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class~="border-[#E50914]"] { border-color: var(--pa-accent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="border-[#FF3B30]/"],
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="border-[#E50914]/"] { border-color: color-mix(in srgb, var(--pa-accent) 35%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="ring-[#FF3B30]"] { --tw-ring-color: color-mix(in srgb, var(--pa-accent) 60%, transparent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="from-[#FF3B30]"] { --tw-gradient-from: var(--pa-accent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="to-[#FF3B30]"] { --tw-gradient-to: var(--pa-accent) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="drop-shadow-[0_0_12px_rgba(239,68,68"] { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--pa-accent) 60%, transparent)) !important; }
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="shadow-[#FF3B30"],
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud [class*="shadow-[0_0_"][class*="255,59,48"] { --tw-shadow-color: color-mix(in srgb, var(--pa-accent) 45%, transparent) !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * S · N8 · SUPERFICIES POR SKIN Y RAREZA (tarjetas · cuadros · modales)
 * La skin Power conserva las secciones D y G (su look es la base). Con
 * cualquier otra skin, cada superficie se compone de VARIABLES que fijan la
 * FAMILIA (data-power-family) y la RAREZA (id de la skin): no cambia sólo el
 * color, cambia el material —textura de fondo, vidrio, bisel, anillo,
 * corchetes de esquina, halo y brillo—.
 *   neo     acrílico oscuro + micro-rejilla cyber + bisel de neón
 *   glitch  scanlines CRT + aberración cromática en el borde
 *   cozy    vidrio cálido, grano de papel, sin hairlines, sombra suave
 *   lux     metal cepillado, doble hilo con sheen
 *   kids    acolchado pastel con lunares y borde grueso
 *   rareza  comun: hairline · rara: doble hilo · epica: bisel + halo +
 *           corchetes · legendaria: hilo de oro + sheen · mitica: sheen en
 *           movimiento (sólo transform) + doble acento
 *   neon    (Neon Overdrive) acrílico verde-negro, rejilla de 24 px, bisel
 *           de neón con halo y BRILLO REACTIVO al kick (::after, sólo opacity)
 * Todo con gradientes CSS: cero imágenes, cero repintados en bucle.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud {
  --sk-vidrio: rgba(12, 12, 18, 0.82);
  --sk-tex: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 46%), radial-gradient(60% 34% at 50% 108%, color-mix(in srgb, var(--pa-accent) 12%, transparent), transparent 70%);
  --sk-tex-size: auto, auto;
  --sk-borde: color-mix(in srgb, var(--pa-accent) 34%, rgba(255, 255, 255, 0.08));
  --sk-bisel-hi: rgba(255, 255, 255, 0.16);
  --sk-bisel-lo: rgba(0, 0, 0, 0.55);
  --sk-anillo: transparent;
  --sk-halo: 0 0 30px -14px color-mix(in srgb, var(--pa-accent) 55%, transparent);
  --sk-radio: 1rem;
  --sk-esquina: 0px;
  --sk-esquina-color: var(--pa-accent);
  --sk-sheen: none;
}
/* ── familias ─────────────────────────────────────────────────────────── */
html:not(#pa-nunca)[data-power-family="neo"]:not([data-power-accent="power"]) body.power-hud {
  --sk-tex: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 42%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--pa-accent) 7%, transparent) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--pa-accent) 5%, transparent) 0 1px, transparent 1px 24px);
  --sk-tex-size: auto, 24px 24px, 24px 24px;
  --sk-bisel-hi: color-mix(in srgb, var(--pa-accent) 30%, rgba(255, 255, 255, 0.18));
  --sk-radio: 0.85rem;
  --sk-esquina: 12px;
}
html:not(#pa-nunca)[data-power-family="glitch"][data-power-accent] body.power-hud {
  --sk-vidrio: rgba(8, 8, 14, 0.88);
  --sk-tex: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px), linear-gradient(120deg, rgba(0, 240, 255, 0.06), transparent 40%, color-mix(in srgb, var(--pa-accent) 8%, transparent) 100%);
  --sk-tex-size: 100% 3px, auto;
  --sk-borde: color-mix(in srgb, var(--pa-accent) 45%, transparent);
  --sk-anillo: rgba(0, 240, 255, 0.35);
  --sk-halo: -2px 0 0 rgba(0, 240, 255, 0.28), 2px 0 0 color-mix(in srgb, var(--pa-accent) 45%, transparent), 0 0 26px -12px var(--pa-accent);
  --sk-radio: 0.5rem;
}
html:not(#pa-nunca)[data-power-family="cozy"][data-power-accent] body.power-hud {
  --sk-vidrio: color-mix(in srgb, var(--pa-accent) 6%, rgba(24, 16, 12, 0.9));
  --sk-tex: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--pa-accent) 18%, transparent), transparent 60%), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  --sk-tex-size: auto, 6px 6px;
  --sk-borde: color-mix(in srgb, var(--pa-accent) 22%, rgba(255, 235, 210, 0.12));
  --sk-bisel-hi: rgba(255, 240, 220, 0.14);
  --sk-bisel-lo: rgba(0, 0, 0, 0.35);
  --sk-halo: 0 18px 40px -20px rgba(0, 0, 0, 0.85), 0 0 34px -18px color-mix(in srgb, var(--pa-accent) 60%, transparent);
  --sk-radio: 1.35rem;
}
html:not(#pa-nunca)[data-power-family="lux"][data-power-accent] body.power-hud {
  --sk-vidrio: rgba(10, 10, 12, 0.9);
  --sk-tex: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px), linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%, rgba(0, 0, 0, 0.25) 100%);
  --sk-tex-size: auto, auto;
  --sk-borde: color-mix(in srgb, var(--pa-accent) 55%, #d9c38a);
  --sk-bisel-hi: rgba(255, 255, 255, 0.24);
  --sk-anillo: color-mix(in srgb, var(--pa-accent) 22%, transparent);
  --sk-halo: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 24px 50px -30px rgba(0, 0, 0, 0.95), 0 0 34px -14px color-mix(in srgb, var(--pa-accent) 60%, transparent);
  --sk-radio: 0.75rem;
  --sk-sheen: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.09) 47%, transparent 56%);
}
html:not(#pa-nunca)[data-power-family="kids"][data-power-accent] body.power-hud {
  --sk-vidrio: color-mix(in srgb, var(--pa-accent) 8%, rgba(20, 18, 26, 0.9));
  --sk-tex: radial-gradient(circle, color-mix(in srgb, var(--pa-accent) 16%, transparent) 1.5px, transparent 1.9px), linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 45%);
  --sk-tex-size: 18px 18px, auto;
  --sk-borde: color-mix(in srgb, var(--pa-accent) 55%, #fff);
  --sk-bisel-hi: rgba(255, 255, 255, 0.22);
  --sk-bisel-lo: rgba(0, 0, 0, 0.3);
  --sk-anillo: color-mix(in srgb, var(--pa-accent) 30%, transparent);
  --sk-halo: 0 12px 28px -14px color-mix(in srgb, var(--pa-accent) 55%, transparent);
  --sk-radio: 1.5rem;
}
/* ── rareza (por id de skin) ───────────────────────────────────────────── */
html:not(#pa-nunca)[data-power-family]:is([data-power-accent="gold"], [data-power-accent="ice"], [data-power-accent="chrome"], [data-power-accent="cobalto"], [data-power-accent="vapor"], [data-power-accent="latte"], [data-power-accent="durazno"], [data-power-accent="esmeralda"]) body.power-hud {
  --sk-anillo: color-mix(in srgb, var(--pa-accent) 28%, transparent);
}
html:not(#pa-nunca)[data-power-family]:is([data-power-accent="violet"], [data-power-accent="ember"], [data-power-accent="matrix"], [data-power-accent="sakura"], [data-power-accent="onyx"], [data-power-accent="rubi"]) body.power-hud {
  --sk-anillo: color-mix(in srgb, var(--pa-accent) 34%, transparent);
  --sk-esquina: 16px;
  --sk-halo: 0 0 30px -8px color-mix(in srgb, var(--pa-accent) 65%, transparent), 0 26px 50px -30px rgba(0, 0, 0, 0.95);
}
html:not(#pa-nunca)[data-power-family]:is([data-power-accent="plasma"], [data-power-accent="cafe-con-leche"], [data-power-accent="champagne"], [data-power-accent="platino"]) body.power-hud {
  --sk-borde: color-mix(in srgb, var(--pa-accent) 45%, #e2c27a);
  --sk-anillo: rgba(226, 194, 122, 0.38);
  --sk-esquina: 18px;
  --sk-esquina-color: #e2c27a;
  --sk-sheen: linear-gradient(115deg, transparent 36%, rgba(255, 244, 214, 0.12) 46%, transparent 56%);
  --sk-halo: 0 0 34px -8px color-mix(in srgb, var(--pa-accent) 60%, transparent), 0 0 0 1px rgba(226, 194, 122, 0.18), 0 26px 50px -30px rgba(0, 0, 0, 0.95);
}
html:not(#pa-nunca)[data-power-family]:is([data-power-accent="glitch"], [data-power-accent="nullbyte"]) body.power-hud {
  --sk-anillo: rgba(0, 240, 255, 0.4);
  --sk-esquina: 20px;
  --sk-esquina-color: #22d3ee;
  --sk-sheen: linear-gradient(115deg, transparent 40%, rgba(0, 240, 255, 0.1) 48%, color-mix(in srgb, var(--pa-accent) 14%, transparent) 52%, transparent 60%);
}
/* ── NEON OVERDRIVE ────────────────────────────────────────────────────── */
html:not(#pa-nunca)[data-power-family][data-power-accent="neon"] body.power-hud {
  --sk-vidrio: rgba(4, 12, 7, 0.86);
  --sk-tex: linear-gradient(160deg, rgba(200, 255, 180, 0.07), transparent 38%), repeating-linear-gradient(90deg, rgba(48, 255, 20, 0.075) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(48, 255, 20, 0.055) 0 1px, transparent 1px 24px), radial-gradient(70% 45% at 50% 110%, rgba(48, 255, 20, 0.16), transparent 70%);
  --sk-tex-size: auto, 24px 24px, 24px 24px, auto;
  --sk-borde: rgba(48, 255, 20, 0.42);
  --sk-bisel-hi: rgba(200, 255, 180, 0.3);
  --sk-bisel-lo: rgba(0, 20, 6, 0.7);
  --sk-anillo: rgba(48, 255, 20, 0.14);
  --sk-halo: 0 0 34px -10px rgba(48, 255, 20, 0.55), 0 22px 44px -30px rgba(0, 0, 0, 0.95);
  --sk-radio: 0.7rem;
  --sk-esquina: 14px;
  --sk-esquina-color: #7dff5e;
}
/* ── la superficie ─────────────────────────────────────────────────────── */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud :is(
  .power-card, .power-panel, .power-stat-card, .power-monitor, .pf-section, .pf-hero, .pw-game-card, .rpg-card, .alumno-card, .curso-card, .curso-stat-box, .curso-tech, .ag-battlepass, .pw-tcg-card, .as-glass, .as-radar-card, .feed-venta-row,
  :is(div, section, article, aside, form)[class*="rounded-2xl"]:is([class*="bg-zinc-9"], [class*="bg-[#0"], [class*="bg-black/"]),
  :is(div, section, article, aside, form)[class*="rounded-3xl"]:is([class*="bg-zinc-9"], [class*="bg-[#0"], [class*="bg-black/"]),
  .pw-overlay:not(.hidden) > :not(.pw-backdrop), [id$="-modal"]:not(.hidden) > :not(.absolute):not(.min-h-full):not(.pw-backdrop),
  .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container, dialog[open], .modal-vinculacion-box, .exito-sheet, .exito-card, .boveda-panel, .hud-mision-sheet, .mc-panel, .pp-modal-caja
) {
  background-color: var(--sk-vidrio) !important;
  background-image:
    linear-gradient(var(--sk-esquina-color), var(--sk-esquina-color)),
    linear-gradient(var(--sk-esquina-color), var(--sk-esquina-color)),
    linear-gradient(var(--sk-esquina-color), var(--sk-esquina-color)),
    linear-gradient(var(--sk-esquina-color), var(--sk-esquina-color)),
    var(--sk-sheen),
    var(--sk-tex) !important;
  background-size: var(--sk-esquina) 2px, 2px var(--sk-esquina), var(--sk-esquina) 2px, 2px var(--sk-esquina), auto, var(--sk-tex-size) !important;
  background-position: top left, top left, bottom right, bottom right, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  border: 1px solid var(--sk-borde) !important;
  border-radius: var(--sk-radio) !important;
  box-shadow:
    inset 0 1px 0 var(--sk-bisel-hi),
    inset 0 -1px 0 var(--sk-bisel-lo),
    inset 0 0 0 3px var(--sk-anillo),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    var(--sk-halo) !important;
}
/* Los corchetes rojos/acento de power-ui (::before) ya no hacen falta: los pinta la superficie. */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud :is(.power-card, .power-panel, .rpg-card, .company-rpg-card)::before { background: none !important; }
/* Modales: el velo toma el tinte de la familia. */
html:not(#pa-nunca)[data-power-accent]:not([data-power-accent="power"]) body.power-hud :is(.pw-overlay:not(.hidden) > .pw-backdrop, .pw-backdrop, .power-modal-backdrop, [id$="-modal"]:not(.hidden) > .absolute.inset-0) {
  background: color-mix(in srgb, var(--pa-accent) 5%, rgba(3, 3, 6, 0.66)) !important;
}
/* Sheen en movimiento (mítica): una banda de luz recorre la superficie, sólo transform. */
html:not(#pa-nunca):is([data-power-accent="glitch"], [data-power-accent="nullbyte"]) body.power-hud :is(.pf-hero, .power-stat-card, .pw-panel, .pw-modal-box, .modal-card)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; z-index: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(0, 240, 255, 0.10) 49%, color-mix(in srgb, var(--pa-accent) 14%, transparent) 51%, transparent 58%);
  animation: pa-sheen-mitica 6.5s linear infinite;
}
@keyframes pa-sheen-mitica { from { transform: translate3d(-40%, 0, 0); } to { transform: translate3d(40%, 0, 0); } }
/* NEON OVERDRIVE · brillo reactivo al kick (neon-overdrive.js pone html[data-neon-golpe]). */
html:not(#pa-nunca)[data-power-accent="neon"] body.power-hud :is(.pf-hero, .power-stat-card, .pw-panel, .pw-modal-box, .modal-card, .mc-panel)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 0 1px rgba(125, 255, 94, 0.85), inset 0 0 18px -6px rgba(48, 255, 20, 0.6), 0 0 28px -4px rgba(48, 255, 20, 0.85);
  background: none !important; animation: none !important;
  opacity: 0; transition: opacity 0.18s ease-out; will-change: opacity;
}
html:not(#pa-nunca)[data-power-accent="neon"][data-neon-golpe] body.power-hud :is(.pf-hero, .power-stat-card, .pw-panel, .pw-modal-box, .modal-card, .mc-panel)::after { opacity: 0.9; transition: none; }
html:not(#pa-nunca)[data-power-accent="neon"] body.power-hud :is(.pf-hero, .power-stat-card, .pw-panel, .pw-modal-box, .modal-card, .mc-panel) { position: relative; }
html:not(#pa-nunca)[data-power-accent="neon"] body.power-hud .power-console-header {
  border-bottom: 1px solid rgba(48, 255, 20, 0.38) !important;
  box-shadow: inset 0 -1px 0 rgba(200, 255, 180, 0.12), 0 8px 28px -18px rgba(48, 255, 20, 0.6) !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(#pa-nunca):is([data-power-accent="glitch"], [data-power-accent="nullbyte"]) body.power-hud :is(.pf-hero, .power-stat-card, .pw-panel, .pw-modal-box, .modal-card)::after { animation: none !important; }
}