/* PowerAdmin — power-ui.css — Estilos base de PowerAdmin (variables, layout, componentes compartidos). (Relocado desde assets/power-ui.css, sin cambios de contenido.) */

/**
 * Power Admin — HUD visual system (solo presentación)
 * Fondo zinc-950 · acento usuario --power-accent (default rojo Power)
 */

:root {
  /* Acento de usuario (perfil / power_accent; default Power red) */
  --power-accent: #FF3B30;
  --power-accent-dim: rgba(255, 59, 48, 0.12);
  --power-accent-soft: rgba(255, 59, 48, 0.15);
  --power-accent-glow: rgba(255, 59, 48, 0.32);
  /* Aliases legacy */
  --power-red: var(--power-accent);
  --power-red-glow: var(--power-accent-glow);
  --power-red-soft: var(--power-accent-soft);
  --power-red-dim: var(--power-accent-dim);
  --as-accent: var(--power-accent);
  --as-accent-soft: var(--power-accent-soft);
  --as-accent-glow: var(--power-accent-glow);
  --power-bg: #09090b;
  --power-bg-dark: #0B0E14;
  --power-panel: #121214;
  --power-panel-2: #18181b;
  --power-border: #27272a;
  --power-border-hi: #3f3f46;
  --power-text: #f4f4f5;
  --power-muted: #a1a1aa;
  --power-ok: #22c55e;
  --power-warn: #f59e0b;
  --power-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --power-header-h: 3.75rem;
  --power-radius: 1.35rem;
  --power-radius-sm: 1rem;
}

/* ========== SKINS DE ACENTO (color + efecto global sutil) ========== */
/* FREE: power, neon, cyan, coral, mint, sky, rose · PREMIUM: gold, violet, glitch */

/* 1) power — rojo + glow estático suave (default) */
html[data-power-accent="power"] body.power-hud::after,
html.accent-skin-power body.power-hud::after {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, color-mix(in srgb, var(--power-accent) 10%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in srgb, var(--power-accent) 6%, transparent), transparent 50%);
}

/* 2) neon — CYBER LIME / ACID RAVE (#00ff66 / #39ff14) */
html[data-power-accent="neon"],
html.accent-skin-neon {
  --neon-lime: #00ff66;
  --neon-acid: #39ff14;
  --power-accent: #00ff66 !important;
  --power-accent-dim: rgba(0, 255, 102, 0.14) !important;
  --power-accent-soft: rgba(0, 255, 102, 0.2) !important;
  --power-accent-glow: rgba(57, 255, 20, 0.48) !important;
  --as-accent: #00ff66;
  --as-accent-glow: rgba(57, 255, 20, 0.55);
}
@keyframes accent-neon-border {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(0, 255, 102, 0.38),
      0 0 14px rgba(57, 255, 20, 0.16);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.72),
      0 0 24px rgba(0, 255, 102, 0.32);
  }
}
html[data-power-accent="neon"] .power-card,
html[data-power-accent="neon"] .pw-panel,
html[data-power-accent="neon"] .rpg-card,
html[data-power-accent="neon"] .company-rpg-card,
html[data-power-accent="neon"] .pf-hero,
html[data-power-accent="neon"] .pf-section,
html.accent-skin-neon .power-card,
html.accent-skin-neon .pw-panel,
html.accent-skin-neon .rpg-card,
html.accent-skin-neon .company-rpg-card {
  animation: accent-neon-border 3.8s ease-in-out infinite;
}

/* Hábitat rave: strobo lima tenue (capa real, no ::after del chasis) */
@keyframes neonRavePulse {
  0%, 100% {
    opacity: 0.18;
    background:
      radial-gradient(ellipse 80% 55% at 18% 12%, rgba(0, 255, 102, 0.22), transparent 58%),
      radial-gradient(ellipse 70% 50% at 88% 18%, rgba(57, 255, 20, 0.14), transparent 62%);
  }
  14% {
    opacity: 0.42;
    background:
      radial-gradient(ellipse 90% 60% at 22% 8%, rgba(57, 255, 20, 0.38), transparent 55%),
      radial-gradient(ellipse 60% 40% at 78% 22%, rgba(0, 255, 102, 0.22), transparent 60%);
  }
  28% { opacity: 0.1; }
  46% {
    opacity: 0.34;
    background:
      radial-gradient(ellipse 70% 50% at 80% 10%, rgba(0, 255, 102, 0.32), transparent 58%),
      radial-gradient(ellipse 55% 45% at 12% 30%, rgba(57, 255, 20, 0.16), transparent 62%);
  }
  62% { opacity: 0.12; }
  78% { opacity: 0.28; }
}
.habitat-neon-rave,
#habitat-neon-rave {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  animation: neonRavePulse 1.35s ease-in-out infinite;
}
html[data-power-accent="neon"] #power-companion-box .habitat-neon-rave,
html.accent-skin-neon #power-companion-box .habitat-neon-rave,
#power-companion-box.skin-neon .habitat-neon-rave,
html[data-power-accent="neon"] #habitat-neon-rave,
html.accent-skin-neon #habitat-neon-rave,
#power-companion-box.skin-neon #habitat-neon-rave {
  display: block;
}
#power-companion-box.skin-neon,
html[data-power-accent="neon"] #power-companion-box,
html.accent-skin-neon #power-companion-box {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.1),
    inset 0 -8px 20px rgba(0, 0, 0, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(0, 255, 102, 0.22),
    0 0 40px rgba(57, 255, 20, 0.1);
  border-color: rgba(0, 255, 102, 0.35);
}

/* Reflejo neón sobre la duela */
@keyframes neonFloorSheen {
  0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
  45% { opacity: 0.7; transform: scaleX(1.04); }
}
.habitat-neon-floor,
#habitat-neon-floor {
  display: none;
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 32%;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 72% 58% at 50% 100%, rgba(0, 255, 102, 0.34) 0%, rgba(57, 255, 20, 0.12) 42%, transparent 72%);
  mix-blend-mode: screen;
  animation: neonFloorSheen 1.35s ease-in-out infinite;
}
html[data-power-accent="neon"] #habitat-neon-floor,
html.accent-skin-neon #habitat-neon-floor,
#power-companion-box.skin-neon #habitat-neon-floor {
  display: block;
}

/* Sprite: glow emisivo sin deformar píxeles (solo drop-shadow) */
html[data-power-accent="neon"] #power-penguin-gif,
html.accent-skin-neon #power-penguin-gif,
#power-companion-box.skin-neon #power-penguin-gif {
  filter:
    drop-shadow(0 0 3px #00ff66)
    drop-shadow(0 0 8px rgba(57, 255, 20, 0.85))
    drop-shadow(0 0 16px rgba(0, 255, 102, 0.45))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* Visor HUD láser sobre la mirada */
.pet-neon-visor {
  display: none;
  position: absolute;
  left: 50%;
  top: 30%;
  width: 44%;
  height: 8px;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: none;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      #39ff14 10%,
      #00ff66 50%,
      #39ff14 90%,
      transparent 100%);
  box-shadow:
    0 0 6px #00ff66,
    0 0 12px rgba(57, 255, 20, 0.75),
    inset 0 0 3px rgba(255, 255, 255, 0.65);
  opacity: 0.88;
  mix-blend-mode: screen;
}
.pet-neon-visor::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 8%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: neonVisorScan 1.55s linear infinite;
}
@keyframes neonVisorScan {
  0% { transform: translateX(0); opacity: 0.2; }
  18% { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0.15; }
}
html[data-power-accent="neon"] .pet-neon-visor,
html.accent-skin-neon .pet-neon-visor,
#power-companion-box.skin-neon .pet-neon-visor {
  display: block;
}

/* Giro táctico + micro-estela al tap */
#penguin-stage-sprite.pet-neon-spin {
  animation: petNeonLaserSpin 0.42s cubic-bezier(.18, .86, .22, 1);
}
@keyframes petNeonLaserSpin {
  0% { transform: rotate(0deg) scale(1); }
  38% { transform: rotate(240deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}
#penguin-stage-sprite.pet-neon-spin::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
  background: conic-gradient(
    from 200deg,
    transparent 0 52%,
    rgba(0, 255, 102, 0) 58%,
    rgba(57, 255, 20, 0.85) 76%,
    #00ff66 86%,
    transparent 96%
  );
  filter: blur(1.5px);
  mix-blend-mode: screen;
  animation: neonTrailWipe 0.42s ease-out forwards;
}
@keyframes neonTrailWipe {
  0% { opacity: 0.95; transform: scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.35) rotate(50deg); }
}
@media (prefers-reduced-motion: reduce) {
  .habitat-neon-rave,
  #habitat-neon-rave,
  .habitat-neon-floor,
  #habitat-neon-floor,
  .pet-neon-visor::before {
    animation: none;
  }
  #penguin-stage-sprite.pet-neon-spin,
  #penguin-stage-sprite.pet-neon-spin::after {
    animation: none;
  }
  html[data-power-accent="neon"] .power-card,
  html.accent-skin-neon .power-card {
    animation: none;
  }
}

/* 3) cyan — shimmer lento en header/nav */
@keyframes accent-header-shimmer {
  0% { background-position: 120% 0; opacity: 0; }
  12% { opacity: 0.85; }
  45% { background-position: -20% 0; opacity: 0.5; }
  60%, 100% { background-position: -20% 0; opacity: 0; }
}
html[data-power-accent="cyan"] .power-console-header::after,
html.accent-skin-cyan .power-console-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(34, 211, 238, 0.07) 48%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(34, 211, 238, 0.07) 52%,
    transparent 60%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: accent-header-shimmer 5.5s ease-in-out infinite;
}
html[data-power-accent="cyan"] .power-console-header .power-console-inner,
html.accent-skin-cyan .power-console-header .power-console-inner {
  position: relative;
  z-index: 1;
}
html[data-power-accent="cyan"] .power-nav-slot.is-active,
html.accent-skin-cyan .power-nav-slot.is-active {
  box-shadow: 0 0 14px color-mix(in srgb, var(--power-accent) 28%, transparent);
}

/* 4) coral — glow cálido de fondo */
html[data-power-accent="coral"] body.power-hud::after,
html.accent-skin-coral body.power-hud::after {
  background:
    radial-gradient(ellipse 75% 55% at 40% -5%, color-mix(in srgb, var(--power-accent) 14%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 90%, color-mix(in srgb, var(--power-accent) 9%, transparent), transparent 52%);
}
html[data-power-accent="coral"] .power-console-header,
html.accent-skin-coral .power-console-header {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--power-accent) 22%, transparent),
    0 8px 28px rgba(0, 0, 0, 0.35),
    0 0 32px color-mix(in srgb, var(--power-accent) 12%, transparent);
}

/* 5) mint — pulse suave (borde + glow) */
@keyframes accent-mint-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--power-accent) 22%, transparent),
      0 0 10px color-mix(in srgb, var(--power-accent) 8%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--power-accent) 48%, transparent),
      0 0 18px color-mix(in srgb, var(--power-accent) 18%, transparent);
  }
}
html[data-power-accent="mint"] .power-card,
html[data-power-accent="mint"] .pw-panel,
html[data-power-accent="mint"] .rpg-card,
html[data-power-accent="mint"] .company-rpg-card,
html.accent-skin-mint .power-card,
html.accent-skin-mint .pw-panel,
html.accent-skin-mint .rpg-card,
html.accent-skin-mint .company-rpg-card {
  animation: accent-mint-pulse 4.2s ease-in-out infinite;
}

/* 6) sky — shimmer leve header (más suave que cyan) */
html[data-power-accent="sky"] .power-console-header::after,
html.accent-skin-sky .power-console-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 42%,
    rgba(56, 189, 248, 0.05) 49%,
    rgba(255, 255, 255, 0.08) 50.5%,
    rgba(56, 189, 248, 0.05) 52%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: accent-header-shimmer 6.5s ease-in-out infinite;
}
html[data-power-accent="sky"] .power-console-header .power-console-inner,
html.accent-skin-sky .power-console-header .power-console-inner {
  position: relative;
  z-index: 1;
}

/* 7) rose — glow rosa de fondo */
html[data-power-accent="rose"] body.power-hud::after,
html.accent-skin-rose body.power-hud::after {
  background:
    radial-gradient(ellipse 68% 48% at 50% -8%, color-mix(in srgb, var(--power-accent) 12%, transparent), transparent 56%),
    radial-gradient(ellipse 48% 38% at 0% 100%, color-mix(in srgb, var(--power-accent) 8%, transparent), transparent 50%);
}
html[data-power-accent="rose"] .power-cta,
html.accent-skin-rose .power-cta {
  box-shadow: 0 0 16px color-mix(in srgb, var(--power-accent) 28%, transparent);
}

/* ——— PREMIUM: partículas + destellos (más intensas; free no las usa) ——— */
.power-accent-fx {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
html.accent-premium .power-accent-fx.is-on,
body.accent-premium .power-accent-fx.is-on {
  display: block;
}
/* Partículas: radial-dots en movimiento lento (low cost) */
html.accent-premium .power-accent-fx.is-on::before,
html.accent-premium .power-accent-fx.is-on::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--power-accent) 75%, #fff) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, color-mix(in srgb, var(--power-accent) 55%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--power-accent) 40%, #fff) 0 0.9px, transparent 1.4px);
  background-size: 92px 92px, 140px 140px, 68px 68px;
  background-position: 0 0, 40px 60px, 20px 30px;
  opacity: 0.35;
  animation: premium-particles-a 14s linear infinite;
}
html.accent-premium .power-accent-fx.is-on::after {
  opacity: 0.22;
  background-size: 110px 110px, 160px 160px, 80px 80px;
  animation: premium-particles-b 18s linear infinite reverse;
}
@keyframes premium-particles-a {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -48px, 0); }
}
@keyframes premium-particles-b {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(24px, -36px, 0); }
}

/* Sweep / destello de borde en cards (premium) */
@keyframes premium-border-sweep {
  0% { background-position: 0% 50%; opacity: 0.55; }
  40% { opacity: 1; }
  100% { background-position: 200% 50%; opacity: 0.55; }
}
html.accent-premium .power-card,
html.accent-premium .pw-panel,
html.accent-premium .rpg-card,
html.accent-premium .company-rpg-card,
html.accent-premium .pf-hero,
html.accent-premium .pf-section,
body.accent-premium .power-card,
body.accent-premium .pw-panel {
  position: relative;
  border-color: color-mix(in srgb, var(--power-accent) 55%, #3f3f46) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--power-accent) 35%, transparent),
    0 0 28px color-mix(in srgb, var(--power-accent) 22%, transparent) !important;
}
html.accent-premium .power-card::before,
html.accent-premium .pw-panel::before,
html.accent-premium .rpg-card::before,
html.accent-premium .company-rpg-card::before,
body.accent-premium .power-card::before,
body.accent-premium .pw-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    color-mix(in srgb, var(--power-accent) 85%, #fff) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: premium-border-sweep 2.4s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.85;
}
html.accent-premium .power-cta,
body.accent-premium .power-cta {
  box-shadow:
    0 0 22px color-mix(in srgb, var(--power-accent) 42%, transparent),
    0 4px 0 color-mix(in srgb, var(--power-accent) 35%, #000);
}

/* gold — brillo metálico en botones primarios (más intenso) */
@keyframes accent-gold-shine {
  0% { background-position: 120% 0; }
  100% { background-position: -40% 0; }
}
html[data-power-accent="gold"] .power-cta,
html[data-power-accent="gold"] a.power-cta,
html[data-power-accent="gold"] .btn-reward,
html.accent-skin-gold .power-cta,
html.accent-skin-gold a.power-cta {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    135deg,
    #c9a227 0%,
    #f5c542 38%,
    #fff3c4 50%,
    #f5c542 62%,
    #b8860b 100%
  ) !important;
  background-size: 100% 100%;
  color: #1a1408 !important;
  border-color: rgba(245, 197, 66, 0.75) !important;
  box-shadow: 0 0 26px rgba(245, 197, 66, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-power-accent="gold"] .power-cta::after,
html.accent-skin-gold .power-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: accent-gold-shine 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* violet — halo fuerte en avatar / card activa */
html[data-power-accent="violet"] .pf-avatar-ring,
html[data-power-accent="violet"] .pf-avatar-inner,
html.accent-skin-violet .pf-avatar-ring {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--power-accent) 65%, transparent),
    0 0 28px color-mix(in srgb, var(--power-accent) 50%, transparent),
    0 0 52px color-mix(in srgb, var(--power-accent) 28%, transparent);
}
html[data-power-accent="violet"] .power-nav-slot.is-active,
html[data-power-accent="violet"] .power-card:hover,
html[data-power-accent="violet"] .company-rpg-card:hover,
html.accent-skin-violet .power-nav-slot.is-active {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--power-accent) 55%, transparent),
    0 0 32px color-mix(in srgb, var(--power-accent) 38%, transparent);
}

/* ==========================================================================
   EMBER SUPREME 3D — FOGATA CINEMÁTICA & ILUMINACIÓN VIVA
   ========================================================================== */

/* 1. Fondo de Fogata: Iluminación Respírable manteniendo la Cuadrícula intacta */
@keyframes ember-fire-flicker {
  0%, 100% {
    background:
      radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 70, 0, 0.32), rgba(120, 20, 0, 0.15) 50%, transparent 80%),
      radial-gradient(circle at 10% 20%, rgba(200, 40, 0, 0.12), transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(255, 110, 0, 0.15), transparent 45%) !important;
  }
  25% {
    background:
      radial-gradient(ellipse 85% 65% at 48% 98%, rgba(255, 90, 10, 0.42), rgba(140, 30, 0, 0.2) 55%, transparent 80%),
      radial-gradient(circle at 12% 22%, rgba(220, 60, 0, 0.18), transparent 42%),
      radial-gradient(circle at 88% 78%, rgba(255, 90, 0, 0.12), transparent 40%) !important;
  }
  50% {
    background:
      radial-gradient(ellipse 78% 58% at 52% 102%, rgba(230, 50, 0, 0.28), rgba(100, 15, 0, 0.12) 48%, transparent 78%),
      radial-gradient(circle at 8% 18%, rgba(180, 30, 0, 0.1), transparent 38%),
      radial-gradient(circle at 92% 82%, rgba(255, 130, 20, 0.18), transparent 48%) !important;
  }
  75% {
    background:
      radial-gradient(ellipse 88% 68% at 50% 97%, rgba(255, 110, 20, 0.38), rgba(150, 35, 0, 0.22) 52%, transparent 82%),
      radial-gradient(circle at 15% 25%, rgba(240, 70, 0, 0.2), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(200, 50, 0, 0.15), transparent 42%) !important;
  }
}

html[data-power-accent="ember"] body.power-hud::after,
html.accent-skin-ember body.power-hud::after {
  animation: ember-fire-flicker 4s ease-in-out infinite !important;
}

/* 2. Tarjetas con Relieve de Piedra Calcinada y Bordes Cálidos */
html[data-power-accent="ember"] .pw-panel,
html[data-power-accent="ember"] .power-card,
html.accent-skin-ember .pw-panel,
html.accent-skin-ember .power-card {
  background: linear-gradient(165deg, rgba(20, 8, 6, 0.95) 0%, rgba(8, 3, 2, 0.98) 100%) !important;
  border: 1px solid rgba(255, 80, 10, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 160, 60, 0.15) !important;
  backdrop-filter: blur(8px) !important;
}

/* 3. Canvas 3D Global: Capa interactiva por encima del contenido */
#ember-3d-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* 4. Quemaduras dinámicas de chispa en las cards */
@keyframes ember-scorch-fade {
  0% {
    box-shadow: inset 0 0 18px rgba(255, 120, 0, 0.8), 0 0 14px rgba(255, 69, 0, 0.6);
    border-color: rgba(255, 180, 50, 0.9);
  }
  50% {
    box-shadow: inset 0 0 10px rgba(255, 69, 0, 0.4), 0 0 8px rgba(200, 40, 0, 0.3);
    border-color: rgba(255, 90, 0, 0.6);
  }
  100% {
    box-shadow: inset 0 0 0px transparent, 0 0 0px transparent;
    border-color: rgba(255, 80, 10, 0.35);
  }
}

.pw-panel.is-scorched,
.power-card.is-scorched {
  animation: ember-scorch-fade 2.2s ease-out forwards !important;
}

/* plasma — magenta (#E879F9) halo + brillo */
html[data-power-accent="plasma"] body.power-hud::after,
html.accent-skin-plasma body.power-hud::after {
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, #e879f9 16%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 80%, color-mix(in srgb, #c026d3 12%, transparent), transparent 50%);
}
html[data-power-accent="plasma"] .pf-avatar-ring,
html.accent-skin-plasma .pf-avatar-ring {
  box-shadow:
    0 0 0 2px rgba(232, 121, 249, 0.7),
    0 0 30px rgba(232, 121, 249, 0.45),
    0 0 50px rgba(192, 38, 211, 0.25);
}

/* ice — cian hielo (#67E8F9) shimmer frío */
html[data-power-accent="ice"] body.power-hud::after,
html.accent-skin-ice body.power-hud::after {
  background:
    radial-gradient(ellipse 75% 50% at 50% -8%, color-mix(in srgb, #67e8f9 14%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 40% at 0% 100%, color-mix(in srgb, #a5f3fc 10%, transparent), transparent 50%);
}
html[data-power-accent="ice"] .power-console-header::after,
html.accent-skin-ice .power-console-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(103, 232, 249, 0.12) 48%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(103, 232, 249, 0.12) 52%,
    transparent 62%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: accent-header-shimmer 3.2s ease-in-out infinite;
}
html[data-power-accent="ice"] .power-console-header .power-console-inner,
html.accent-skin-ice .power-console-header .power-console-inner {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   CAFÉ CON LECHE — espresso, crema, vapor (sin figuras humanas)
   ========================================================================== */
html[data-power-accent="cafe-con-leche"],
html.accent-skin-cafe-con-leche,
html[data-power-skin="cafe-con-leche"] {
  --power-bg: #120c08;
  --power-bg-dark: #120c08;
  --power-surface: #1a120b;
  --power-surface-border: rgba(224, 195, 161, 0.15);
  --power-panel: #1a120b;
  --power-panel-2: #22160e;
  --power-border: rgba(224, 195, 161, 0.15);
  --power-accent: #e0c3a1;
  --power-accent-dim: rgba(224, 195, 161, 0.12);
  --power-accent-soft: rgba(224, 195, 161, 0.18);
  --power-accent-glow: rgba(197, 155, 114, 0.4);
  --power-red: #c95d4e;
  --power-red-soft: rgba(201, 93, 78, 0.2);
  --power-red-glow: rgba(201, 93, 78, 0.35);
  --power-text: #f7ede2;
  --power-text-dim: #b89f88;
  --power-muted: #b89f88;
  background-color: #120c08;
  color: #f7ede2;
}

@keyframes cafe-steam-drift {
  0%, 100% {
    opacity: 0.55;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translate3d(1.5%, -1.2%, 0) scale(1.04);
  }
}

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud,
html[data-power-skin="cafe-con-leche"] body.power-hud {
  background-color: #120c08 !important;
  color: #f7ede2;
}

/* Vapor tibio + crema de espresso (solo líquidos / luz / espuma) */
html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    radial-gradient(ellipse 90% 55% at 50% 118%, rgba(166, 124, 82, 0.28), rgba(18, 12, 8, 0) 58%),
    radial-gradient(ellipse 46% 32% at 18% -4%, rgba(247, 237, 226, 0.1), transparent 62%),
    radial-gradient(ellipse 50% 36% at 88% 8%, rgba(224, 195, 161, 0.12), transparent 60%),
    radial-gradient(circle at 50% 0%, rgba(197, 155, 114, 0.08), transparent 42%);
  animation: cafe-steam-drift 9s ease-in-out infinite;
}

html[data-power-accent="cafe-con-leche"] .power-card,
html[data-power-accent="cafe-con-leche"] .power-panel,
html[data-power-accent="cafe-con-leche"] .power-stat-card,
html[data-power-accent="cafe-con-leche"] .pw-panel,
html[data-power-accent="cafe-con-leche"] .profe-card,
html.accent-skin-cafe-con-leche .power-card,
html.accent-skin-cafe-con-leche .power-panel,
html.accent-skin-cafe-con-leche .power-stat-card,
html.accent-skin-cafe-con-leche .pw-panel {
  background-color: #18110b !important;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(224, 195, 161, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(166, 124, 82, 0.05) 0%, transparent 45%) !important;
  border: 1px solid rgba(224, 195, 161, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html[data-power-accent="cafe-con-leche"] .power-console-header,
html.accent-skin-cafe-con-leche .power-console-header {
  background: rgba(18, 12, 8, 0.92) !important;
  border-bottom-color: rgba(224, 195, 161, 0.12) !important;
}

html[data-power-accent="cafe-con-leche"] .power-cta,
html[data-power-accent="cafe-con-leche"] .power-nav-slot.is-active,
html[data-power-accent="cafe-con-leche"] button.power-accent-btn,
html.accent-skin-cafe-con-leche .power-cta,
html.accent-skin-cafe-con-leche .power-nav-slot.is-active,
html.accent-skin-cafe-con-leche button.power-accent-btn {
  background: linear-gradient(135deg, #d4b28c 0%, #a67c52 50%, #8c6038 100%) !important;
  color: #120c08 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 6px 20px rgba(166, 124, 82, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-power-accent="cafe-con-leche"] .power-cta::after,
html[data-power-accent="cafe-con-leche"] .power-nav-slot.is-active::after,
html.accent-skin-cafe-con-leche .power-cta::after,
html.accent-skin-cafe-con-leche .power-nav-slot.is-active::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
html[data-power-accent="cafe-con-leche"] .power-cta > *,
html[data-power-accent="cafe-con-leche"] .power-nav-slot.is-active > *,
html.accent-skin-cafe-con-leche .power-cta > *,
html.accent-skin-cafe-con-leche .power-nav-slot.is-active > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] body.power-hud::after,
  html.accent-skin-cafe-con-leche body.power-hud::after {
    animation: none !important;
  }
}

/* glitch — multi-acento + micro glitch 1–2s cada ~12s en logo/badge */
@supports (color: color-mix(in srgb, red, blue)) {
  @property --power-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #ff3b30;
  }
}
html[data-power-accent="glitch"],
html.accent-skin-glitch,
body.accent-glitch {
  /* Reposo ESTABLE — antes ciclaba de color cada 14s vía animación continua
     de custom properties (bucle estroboscópico que forzaba repaint de GPU en
     cualquier elemento usando --power-accent). Reparado: acento carmesí fijo,
     sin animación de fondo; el "glitch" ahora vive solo en ráfagas cortas y
     espaciadas (ver accent-glitch-micro y pet-cyber-aberration abajo). */
  --power-accent: #ff3b30;
  --power-accent-dim: rgba(255, 59, 48, 0.12);
  --power-accent-soft: rgba(255, 59, 48, 0.15);
  --power-accent-glow: rgba(255, 59, 48, 0.32);
}
/* Micro glitch en brand/logo/badge — 97% del tiempo en calma total, una
   ráfaga de ~0.15s cada 6s (antes: 12s con más frames activos). */
@keyframes accent-glitch-micro {
  0%, 97%, 100% {
    transform: none;
    filter: none;
    text-shadow: none;
    clip-path: none;
  }
  97.5% {
    transform: translate(-1.5px, 0.4px);
    filter: hue-rotate(35deg);
    text-shadow: -1px 0 #22d3ee, 1px 0 #ff3b30;
  }
  98.5% {
    transform: translate(1.5px, -0.4px);
    filter: hue-rotate(-25deg);
    text-shadow: 1px 0 #a855f7, -1px 0 #22d3ee;
  }
  99.5% {
    transform: none;
    filter: none;
    text-shadow: none;
  }
}
html[data-power-accent="glitch"] .power-brand,
html[data-power-accent="glitch"] .power-brand img,
html[data-power-accent="glitch"] .login-logo-bolt,
html[data-power-accent="glitch"] .login-beta-badge,
html[data-power-accent="glitch"] .brand-power,
html[data-power-accent="glitch"] .power-session-pill,
html.accent-skin-glitch .power-brand,
html.accent-skin-glitch .power-brand img,
html.accent-skin-glitch .login-logo-bolt {
  animation: accent-glitch-micro 6s steps(1, end) infinite;
}

/* ===== Cyber-Aberration Estable — Skin "Glitch" aplicada al sprite del
   compañero en perfil.html (#power-penguin-gif). Reemplaza cualquier
   parpadeo/flash continuo por una sombra cromática ESTÁTICA en reposo +
   una ráfaga de 0.15s cada ~6s (97% del tiempo en calma), igual cadencia
   que accent-glitch-micro de arriba. No conflictúa con .pet-hype/.pet-sleepy
   (mayor especificidad — ver perfil.html — siguen ganando cuando aplican). */
html[data-power-accent="glitch"] #power-penguin-gif,
html.accent-skin-glitch #power-penguin-gif,
body.accent-glitch #power-penguin-gif {
  filter: drop-shadow(-1.5px 0 rgba(0, 240, 255, 0.6)) drop-shadow(1.5px 0 rgba(239, 68, 68, 0.6));
  animation: pet-cyber-aberration-micro 6s steps(1, end) infinite;
}
@keyframes pet-cyber-aberration-micro {
  0%, 97%, 100% {
    filter: drop-shadow(-1.5px 0 rgba(0, 240, 255, 0.6)) drop-shadow(1.5px 0 rgba(239, 68, 68, 0.6));
    transform: none;
  }
  97.5% {
    filter: drop-shadow(-3px 0 rgba(0, 240, 255, 0.75)) drop-shadow(3px 0 rgba(239, 68, 68, 0.75));
    transform: translateX(-1.5px);
  }
  98.5% {
    filter: drop-shadow(3px 0 rgba(0, 240, 255, 0.75)) drop-shadow(-3px 0 rgba(239, 68, 68, 0.75));
    transform: translateX(1.5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="glitch"] #power-penguin-gif,
  html.accent-skin-glitch #power-penguin-gif,
  body.accent-glitch #power-penguin-gif {
    animation: none !important;
  }
}

/* Bloque 4: Café con Leche — vapor lofi ascendente sobre el compañero.
   Oculto por defecto; solo visible con la skin activa, misma técnica de
   gateo por atributo que la aberración cromática de Glitch de arriba. */
.pet-latte-steam {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 58%;
  width: 2px;
  height: 2px;
  pointer-events: none;
  z-index: 4;
}
.pet-latte-steam span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 163, 115, 0.55) 0%, transparent 72%);
  filter: blur(1.5px);
  opacity: 0;
  animation: petLatteSteamRise 3.2s ease-in infinite;
}
.pet-latte-steam span:nth-child(1) { left: -9px; animation-delay: 0s; }
.pet-latte-steam span:nth-child(2) { left: -1px; animation-delay: 1.05s; }
.pet-latte-steam span:nth-child(3) { left: 6px; animation-delay: 2.1s; }
@keyframes petLatteSteamRise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  18% { opacity: 0.65; }
  100% { transform: translate(4px, -34px) scale(1.35); opacity: 0; }
}
html[data-power-accent="cafe-con-leche"] .pet-latte-steam,
html.accent-skin-cafe-con-leche .pet-latte-steam {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] .pet-latte-steam,
  html.accent-skin-cafe-con-leche .pet-latte-steam {
    display: none;
  }
}
/* RONDA 10 · Bloque 2 — Legendaria "La Corona": vignette ámbar cálido sobre
   el hábitat completo, solo con Café con Leche activa. Elemento real (no
   ::after) para no chocar en cascada con #power-companion-box.pw-switch-chassis::after
   (rejilla de altavoces del chasis) — ambas capas conviven sin pisarse. */
.pet-latte-vignette {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(224, 195, 161, 0.22) 0%, transparent 62%);
  mix-blend-mode: screen;
}
html[data-power-accent="cafe-con-leche"] .pet-latte-vignette,
html.accent-skin-cafe-con-leche .pet-latte-vignette {
  display: block;
}

/* Bloque 4: Neon Rush (skin "neon") y Obsidian (base oscura por defecto) —
   el brillo del compañero parpadea sutil al tempo del jukebox/radio
   (#pet-room-radio.is-playing, mismo Bloque 4 de la ronda de hábitat) en
   vez de un glow fijo. Silencioso cuando la radio está apagada. */
html[data-power-accent="neon"] #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
html.accent-skin-neon #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
#power-companion-box.skin-neon:has(#pet-room-radio.is-playing) #power-penguin-gif {
  animation: petNeonRushTempo 0.85s ease-in-out infinite;
}
@keyframes petNeonRushTempo {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px #00ff66)
      drop-shadow(0 0 8px rgba(57, 255, 20, 0.55))
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  }
  50% {
    filter:
      drop-shadow(0 0 6px #39ff14)
      drop-shadow(0 0 16px rgba(0, 255, 102, 0.95))
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  }
}
html:not([data-power-accent]) #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
html[data-power-accent="power"] #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
html.accent-skin-power #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif {
  animation: petObsidianTempo 0.85s ease-in-out infinite;
}
@keyframes petObsidianTempo {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 59, 48, 0.22)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 59, 48, 0.6)); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="neon"] #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
  html.accent-skin-neon #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
  #power-companion-box.skin-neon:has(#pet-room-radio.is-playing) #power-penguin-gif,
  html:not([data-power-accent]) #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
  html[data-power-accent="power"] #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif,
  html.accent-skin-power #power-companion-box:has(#pet-room-radio.is-playing) #power-penguin-gif {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="neon"] .power-card,
  html[data-power-accent="neon"] .pw-panel,
  html[data-power-accent="neon"] .rpg-card,
  html[data-power-accent="neon"] .company-rpg-card,
  html[data-power-accent="neon"] .pf-hero,
  html[data-power-accent="neon"] .pf-section,
  html.accent-skin-neon .power-card,
  html.accent-skin-neon .pw-panel,
  html.accent-skin-neon .rpg-card,
  html.accent-skin-neon .company-rpg-card,
  html[data-power-accent="mint"] .power-card,
  html[data-power-accent="mint"] .pw-panel,
  html[data-power-accent="mint"] .rpg-card,
  html[data-power-accent="mint"] .company-rpg-card,
  html.accent-skin-mint .power-card,
  html.accent-skin-mint .pw-panel,
  html.accent-skin-mint .rpg-card,
  html.accent-skin-mint .company-rpg-card,
  html[data-power-accent="cyan"] .power-console-header::after,
  html.accent-skin-cyan .power-console-header::after,
  html[data-power-accent="sky"] .power-console-header::after,
  html.accent-skin-sky .power-console-header::after,
  html[data-power-accent="ice"] .power-console-header::after,
  html.accent-skin-ice .power-console-header::after,
  html[data-power-accent="gold"] .power-cta::after,
  html.accent-skin-gold .power-cta::after,
  html.accent-premium .power-accent-fx.is-on::before,
  html.accent-premium .power-accent-fx.is-on::after,
  html.accent-premium .power-card::before,
  html.accent-premium .pw-panel::before,
  html.accent-premium .rpg-card::before,
  html.accent-premium .company-rpg-card::before,
  body.accent-premium .power-card::before,
  body.accent-premium .pw-panel::before,
  html[data-power-accent="glitch"],
  html.accent-skin-glitch,
  body.accent-glitch,
  html[data-power-accent="glitch"] .power-brand,
  html[data-power-accent="glitch"] .power-brand img,
  html[data-power-accent="glitch"] .login-logo-bolt,
  html[data-power-accent="glitch"] .login-beta-badge,
  html[data-power-accent="glitch"] .brand-power,
  html[data-power-accent="glitch"] .power-session-pill,
  html.accent-skin-glitch .power-brand,
  html.accent-skin-glitch .power-brand img,
  html.accent-skin-glitch .login-logo-bolt {
    animation: none !important;
  }
  /* Premium estático: sin partículas en motion reduce */
  html.accent-premium .power-accent-fx.is-on,
  body.accent-premium .power-accent-fx.is-on {
    display: none;
  }
  html.accent-premium .power-card,
  html.accent-premium .pw-panel,
  body.accent-premium .power-card,
  body.accent-premium .pw-panel {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--power-accent) 40%, transparent),
      0 0 18px color-mix(in srgb, var(--power-accent) 16%, transparent) !important;
  }
}

/* ========== BASE (PWA / status bar Android = mismo fondo #09090b) ========== */
:root,
html {
  color-scheme: dark;
  background-color: #09090b;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

html,
body {
  background-color: #09090b;
  min-height: 100%;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-top: env(safe-area-inset-top, 0px);
}

body.power-hud {
  background-color: #09090b;
  background-color: var(--power-bg);
  color: var(--power-text);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Grid sutil + viñeta radial del acento */
body.power-hud::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 1;
}

body.power-hud::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, color-mix(in srgb, var(--power-accent) 8%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in srgb, var(--power-accent) 5%, transparent), transparent 50%);
}

/* ══════════════════════════════════════════════════════════════════════════
 * Contenido por encima del FX de acento (z:0)
 * ──────────────────────────────────────────────────────────────────────────
 * POR QUÉ EXISTE ESTA REGLA
 * `body.power-hud::before` (grid) y `::after` (viñeta) son `position: fixed`
 * con `z-index: 0`. En el orden de pintado, un positioned descendant con
 * z-index 0 va POR ENCIMA del contenido de bloque en flujo normal. Sin esta
 * regla, la rejilla y la viñeta taparían la interfaz. Elevar cada hijo
 * directo a `position: relative; z-index: 1` lo resuelve.
 *
 * RONDA 37 · POR QUÉ SE ENVUELVE EN :where()
 * El selector original acumulaba especificidad de ID por cada `:not(#id)`
 * — cuatro de ellos — y terminaba pesando (0,4,1). Eso le ganaba a casi
 * cualquier declaración local y convertía en `relative` a TODO hijo directo
 * del body que intentara ser `fixed`. Produjo dos bugs con síntomas
 * completamente distintos:
 *
 *   · El splash del login (`#power-splash`, `position: fixed`) quedaba
 *     degradado a `relative` y seguía ocupando 100dvh DE FLUJO aun estando
 *     invisible: empujaba `.login-stage` y descentraba la tarjeta entre 18 y
 *     88 px según la carga (no determinista).
 *   · El HUD del Sandbox (`#power-sandbox-hud`, `position: fixed;
 *     right: 1rem`) se salía 16 px por la izquierda: sobre un elemento
 *     `relative`, `right` no ancla al borde derecho, DESPLAZA desde su
 *     posición estática.
 *
 * `:where()` aporta CERO especificidad. Envolviendo el ancla y la lista de
 * exclusiones, la regla pasa de (0,4,1) a **(0,0,0)**: sigue aplicándose por
 * defecto a todo hijo que no declare nada, pero ahora CUALQUIER declaración
 * —una clase, un id, una utilidad de Tailwind— la vence sin pelear.
 *
 * Se eligió esto y no agregar más `:not()`: ampliar la lista de exclusiones
 * es exactamente el patrón que ya falló dos veces, porque obliga a recordar
 * esta regla cada vez que alguien añade un elemento `fixed` en cualquiera de
 * las 11 páginas. Con especificidad 0 el problema desaparece de raíz y la
 * lista de exclusiones se conserva intacta por compatibilidad.
 * ══════════════════════════════════════════════════════════════════════════ */
:where(body.power-hud) > :where(*:not(.power-accent-fx):not(#power-accent-fx):not(#power-notif-panel):not(.pw-overlay):not(.power-loader):not(#power-loader):not(#power-fx-confetti):not(#power-fx-toast-root):not(.power-led-overlay):not([id$="-modal"])) {
  position: relative;
  z-index: 1;
}
#power-accent-fx.power-accent-fx {
  z-index: 0 !important;
  position: fixed !important;
  pointer-events: none !important;
}

/* Panel Avisos / notificaciones */
body.power-hud > #power-notif-panel,
#power-notif-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 260 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
#power-notif-panel:not(.open) {
  display: none !important;
  pointer-events: none !important;
}
#power-notif-panel.open {
  display: block !important;
  pointer-events: auto !important;
}
#power-notif-panel .pn-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}
#power-notif-panel .pn-sheet {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(100%, 22rem);
  max-width: 100vw;
  background: #18181b;
  border-left: 1px solid #27272a;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  z-index: 1;
  pointer-events: auto;
}

body.power-hud ::selection {
  background: color-mix(in srgb, var(--power-accent) 40%, transparent);
  color: #fff;
}

/* Tipografía HUD */
.power-hud h1,
.power-hud h2,
.power-title-hud {
  letter-spacing: 0.08em;
  font-weight: 650;
}

.power-label,
.power-hud .power-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #71717a;
}

/* Cards estándar tech */
.power-card,
.power-hud .pw-panel {
  background: rgba(24, 24, 27, 0.8);
  border: 1px solid color-mix(in srgb, var(--power-accent) 35%, transparent);
  border-radius: var(--power-radius);
  box-shadow: 0 0 24px color-mix(in srgb, var(--power-accent) 12%, transparent);
  transition: transform 0.25s var(--power-ease), box-shadow 0.25s ease, border-color 0.2s ease;
}

.power-card:hover,
.power-hud .pw-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px color-mix(in srgb, var(--power-accent) 18%, transparent);
}

.power-score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.power-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

/* ========== HEADER CONSOLA (unificado, altura fija) ========== */
.power-console-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background: rgba(9, 9, 11, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(39, 39, 42, 0.8);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--power-accent) 14%, transparent),
    0 8px 32px rgba(0, 0, 0, 0.35);
  padding-top: env(safe-area-inset-top, 0px);
  min-height: calc(3.5rem + env(safe-area-inset-top, 0px));
}

.power-console-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--power-accent) 55%, transparent), transparent);
  pointer-events: none;
}

.power-console-inner {
  max-width: 80rem;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
  flex-wrap: nowrap;
  min-width: 0;
  min-height: 3.5rem;
  box-sizing: border-box;
}

.power-header-tools,
#power-header-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem 0.5rem;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.power-header-tools #power-session-user,
#power-header-tools #power-session-user {
  flex-shrink: 0;
  order: 1;
  display: inline-flex !important;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.power-header-tools .power-nav,
#power-header-tools .power-nav {
  order: 2;
  min-width: 0;
  flex: 0 1 auto;
}
.power-header-actions,
#power-header-actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  min-width: 0;
}
.power-header-actions > *,
#power-header-actions > * {
  flex-shrink: 0;
}
.power-header-tools .power-mute-btn,
#power-header-tools .power-mute-btn,
#power-mute-btn {
  order: 4;
  flex-shrink: 0;
}

.power-console-header .power-brand {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 2.5rem;
  max-width: 3.25rem;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
.power-console-header .power-brand > img:first-of-type {
  height: 1.85rem !important;
  width: auto !important;
  max-height: 1.85rem !important;
  max-width: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}
.power-console-header .power-brand > *:not(img:first-of-type) {
  display: none !important;
}
.power-console-header .power-brand::after {
  content: "POWER";
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  color: #71717a;
  text-transform: uppercase;
}

.power-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.power-brand img {
  flex-shrink: 0;
}

/* Insignias de rol */
.power-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.power-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.55rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.1;
}
.power-role-badge i { font-size: 9px; opacity: 0.9; }

.power-role-badge.is-shine {
  position: relative;
  overflow: hidden;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.power-role-badge.is-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 45%,
    transparent 100%
  );
  animation: power-badge-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes power-badge-shine {
  0% { left: -60%; opacity: 0; }
  15% { opacity: 1; }
  45% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .power-role-badge.is-shine::after { animation: none; display: none; }
}
.power-role-badge[data-rol="director"] {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.22);
}
.power-role-badge[data-rol="profe"] {
  color: #fecaca;
  background: rgba(255, 59, 48, 0.16);
  border-color: rgba(255, 59, 48, 0.5);
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.18);
}

.power-role-badge[data-rol="company"],
.badge-company,
.badge-company-ficha,
#roles-modal .role-badge[data-role="company"].is-on {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-image:
    linear-gradient(
      118deg,
      transparent 0%,
      transparent 42%,
      rgba(255, 255, 255, 0.05) 47%,
      rgba(255, 220, 220, 0.4) 50%,
      rgba(255, 255, 255, 0.05) 53%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      #000000 0%,
      #0a0a0a 30%,
      #2a0606 58%,
      #FF3B30 100%
    ) !important;
  background-size: 220% 100%, 100% 100% !important;
  background-position: 130% 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255, 59, 48, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(255, 59, 48, 0.38),
    0 0 22px rgba(255, 59, 48, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  animation:
    power-company-shimmer 4.8s ease-in-out infinite,
    power-company-glow 3.6s ease-in-out infinite;
}
.power-role-badge[data-rol="company"] i,
.badge-company-ficha i,
#roles-modal .role-badge[data-role="company"].is-on i {
  color: #fecaca !important;
  opacity: 1 !important;
}
.power-role-badge[data-rol="company"].is-shine::after {
  display: none !important;
  animation: none !important;
}
@keyframes power-company-shimmer {
  0%, 14% { background-position: 130% 0, 0 0; }
  55% { background-position: -50% 0, 0 0; }
  70%, 100% { background-position: -50% 0, 0 0; }
}
@keyframes power-company-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.45),
      0 0 10px rgba(255, 59, 48, 0.28),
      0 0 18px rgba(255, 59, 48, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 59, 48, 0.25),
      0 0 16px rgba(255, 59, 48, 0.48),
      0 0 28px rgba(255, 59, 48, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .power-role-badge[data-rol="company"],
  .badge-company,
  .badge-company-ficha,
  #roles-modal .role-badge[data-role="company"].is-on {
    animation: none;
    background-position: 50% 0, 0 0 !important;
  }
}
.power-role-badge[data-rol="social"] {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.4);
}
.power-role-badge[data-rol="alumno"] {
  color: #d4d4d8;
  background: rgba(63, 63, 70, 0.55);
  border-color: #3f3f46;
}
.power-role-badge[data-rol="casual"] {
  color: #a1a1aa;
  background: rgba(39, 39, 42, 0.8);
  border-color: #3f3f46;
}
.power-role-badge[data-rol="padre"] {
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.4);
}
.power-role-badge[data-rol="visitante"],
.power-role-badge[data-rol="secretaria"] {
  color: #71717a;
  background: rgba(24, 24, 27, 0.9);
  border-color: #27272a;
}

.power-session-avatar {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--power-accent) 45%, #3f3f46);
  background: #18181b;
}
.power-session-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes powerLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
.power-brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.power-live-badge,
[data-power-live] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 12px;
  background: var(--power-accent-soft);
  color: var(--power-accent);
  border: 1px solid var(--power-surface-border, var(--power-accent-dim));
  text-transform: uppercase;
  white-space: nowrap;
}
.power-live-badge .pulse-dot,
[data-power-live] .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--power-accent);
  box-shadow: 0 0 8px var(--power-accent-glow);
  animation: powerLivePulse 1.8s infinite ease-in-out;
}
.power-live-badge.is-director {
  cursor: pointer;
}
.power-live-badge.is-maint {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  animation: powerMaintBlink 1.1s ease-in-out infinite;
}
.power-live-badge.is-maint .pulse-dot {
  background-color: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}
@keyframes powerMaintBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
#power-maint-overlay {
  z-index: 99999;
}
#power-maint-overlay[hidden] { display: none !important; }
.power-maint-pet-wrap {
  position: relative;
  width: 90px;
  height: 90px;
}
.power-maint-pet {
  width: 90px;
  height: 90px;
  object-fit: contain;
  object-position: bottom center;
  image-rendering: pixelated;
  display: block;
  animation: maint-pet-breathe 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.45));
}
.power-maint-pet-shadow {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 56px;
  height: 10px;
  margin-left: -28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
}
@keyframes maint-pet-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-bounce-subtle {
  animation: maint-pet-breathe 2.4s ease-in-out infinite;
}
html.power-maint-lock,
html.power-maint-lock body {
  overflow: hidden !important;
}
.power-session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--power-border);
  background: rgba(24, 24, 27, 0.8);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--power-muted);
  position: relative;
  z-index: 1000;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.power-session-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--power-accent);
  box-shadow: 0 0 8px var(--power-accent-glow);
}

.power-mes-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 1rem;
  border: 1px solid var(--power-border);
  background: rgba(18, 18, 20, 0.9);
}

.power-mes-selector button {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.75rem;
  background: #27272a;
  border: 1px solid transparent;
  color: #e4e4e7;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.power-mes-selector button:hover {
  border-color: color-mix(in srgb, var(--power-accent) 45%, transparent);
  color: #fff;
}

.power-mes-pill {
  min-width: 8.5rem;
  padding: 0.4rem 0.85rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #27272a, #1c1c1f);
  border: 1px solid #3f3f46;
}

/* ========== NAV UNIFICADA ========== */
.power-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.3rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.power-nav::-webkit-scrollbar { display: none; }

.power-nav-slot .label-short { display: none; }
.power-nav-slot .label-full { display: inline; }

.power-nav-slot {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #a1a1aa;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 0.2s var(--power-ease),
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.25s ease,
    background 0.2s ease;
}

.power-nav-slot i {
  font-size: 0.9rem;
  opacity: 0.9;
  color: inherit;
}

.power-nav-slot:hover {
  color: #f4f4f5;
  background: rgba(39, 39, 42, 0.55);
}

.power-nav-slot:active {
  transform: scale(0.98);
}

.power-nav-slot:focus-visible {
  outline: 2px solid var(--power-accent);
  outline-offset: 2px;
}

.power-nav-slot.is-active,
.power-nav-slot[aria-current="page"] {
  color: var(--power-accent);
  background: color-mix(in srgb, var(--power-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--power-accent) 25%, transparent);
}

.power-nav-slot.is-active i,
.power-nav-slot[aria-current="page"] i {
  color: var(--power-accent);
}

.power-nav-slot.is-active::after,
.power-nav-slot[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--power-accent);
  box-shadow: 0 0 8px var(--power-accent-glow);
}

.power-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  border-radius: 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--power-accent) 85%, #fff) 0%,
    var(--power-accent) 48%,
    color-mix(in srgb, var(--power-accent) 70%, #000) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 22px var(--power-accent-glow),
    0 3px 0 color-mix(in srgb, var(--power-accent) 45%, #000),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: transform 0.2s var(--power-ease), box-shadow 0.25s ease, filter 0.15s ease;
}

.power-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 0 32px var(--power-accent-glow),
    0 4px 0 color-mix(in srgb, var(--power-accent) 45%, #000),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.power-cta:active {
  transform: scale(0.98);
  box-shadow:
    0 0 14px var(--power-accent-soft),
    0 2px 0 color-mix(in srgb, var(--power-accent) 40%, #000);
}

.power-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ========== MICROINTERACCIONES GENÉRICAS ========== */
.power-hud button:not(:disabled):not(.power-mute-btn):not(.power-mes-selector button),
.power-hud a.power-nav-slot,
.power-hud a.power-cta,
.power-hud .power-stat-card {
  transition:
    transform 0.15s var(--power-ease),
    box-shadow 0.2s var(--power-ease),
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.power-hud button:not(:disabled):not(.power-mute-btn):hover {
  transform: scale(1.02);
}

.power-hud button:not(:disabled):not(.power-mute-btn):active {
  transform: scale(0.98);
}

.power-hud button.bg-red-600:not(:disabled):hover,
.power-hud button.bg-red-700:not(:disabled):hover,
.power-hud button.bg-\[\#FF3B30\]:hover,
.power-hud button[class*="bg-power-red"]:hover {
  box-shadow: 0 0 20px var(--power-red-glow);
}

.power-hud input,
.power-hud select,
.power-hud textarea {
  transform: none !important;
}

/* ========== CARDS HUD ========== */
.power-card,
.power-panel {
  position: relative;
  background: linear-gradient(165deg, rgba(24, 24, 27, 0.95) 0%, rgba(12, 12, 14, 0.98) 100%);
  border: 1px solid var(--power-border);
  border-radius: 1.15rem;
  overflow: hidden;
}

.power-card::before,
.power-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(#FF3B30, #FF3B30) top left / 14px 2px no-repeat,
    linear-gradient(#FF3B30, #FF3B30) top left / 2px 14px no-repeat,
    linear-gradient(rgba(255, 59, 48, 0.5), rgba(255, 59, 48, 0.5)) top right / 12px 1px no-repeat,
    linear-gradient(rgba(255, 59, 48, 0.5), rgba(255, 59, 48, 0.5)) 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;
  opacity: 0.7;
  z-index: 0;
}

.power-card > *,
.power-panel > * {
  position: relative;
  z-index: 1;
}

/* Fallback accents on legacy rounded cards */
.power-hud .rounded-3xl.border.border-zinc-800,
.power-hud .rounded-2xl.border.border-zinc-800 {
  position: relative;
  background-image: linear-gradient(165deg, rgba(24, 24, 27, 0.96), rgba(12, 12, 14, 0.98));
}

.power-hud .rounded-3xl.border.border-zinc-800::before,
.power-hud .rounded-2xl.border.border-zinc-800::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(#FF3B30, #FF3B30) top left / 12px 2px no-repeat,
    linear-gradient(#FF3B30, #FF3B30) top left / 2px 12px no-repeat,
    linear-gradient(rgba(255, 59, 48, 0.4), rgba(255, 59, 48, 0.4)) top right / 10px 1px no-repeat,
    linear-gradient(rgba(255, 59, 48, 0.4), rgba(255, 59, 48, 0.4)) top right / 1px 10px no-repeat;
  opacity: 0.55;
  z-index: 0;
}

.power-hud .rounded-3xl.border.border-zinc-800 > *,
.power-hud .rounded-2xl.border.border-zinc-800 > * {
  position: relative;
  z-index: 1;
}

.power-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 59, 48, 0.35), var(--power-border), transparent);
  border: 0;
  margin: 0.5rem 0;
}

/* ========== SCORE BAR ========== */
.power-score-bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  background:
    radial-gradient(ellipse 60% 80% at 10% 50%, var(--power-accent-dim), transparent 55%),
    linear-gradient(165deg, var(--power-bg-dark, #0B0E14) 0%, #0c0c0e 100%);
  border: 1px solid var(--power-border);
  border-radius: 1.25rem;
  position: relative;
  overflow: hidden;
}

.power-score-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent);
}

.power-score-cell {
  position: relative;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  min-width: 0;
}

.power-score-cell + .power-score-cell {
  border-left: 1px solid rgba(39, 39, 42, 0.9);
}

.power-score-cell .power-score {
  font-size: clamp(1.5rem, 3.5vw, 2.35rem);
  color: #fff;
}

.power-score-cell.is-hero .power-score {
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  color: #fff;
  text-shadow: 0 0 28px var(--power-accent-glow);
}

.power-score-ring-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.power-score-ring {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  position: relative;
}

.power-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.power-score-ring-progress {
  transition: stroke-dashoffset 0.85s var(--power-ease);
}

/* ========== STAT CARDS ========== */
.power-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .power-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.power-stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1rem 1.1rem;
  background: linear-gradient(160deg, #18181b, #0f0f11);
  border: 1px solid var(--power-border);
  border-radius: 1rem;
  border-left: 3px solid var(--power-accent);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.power-stat-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--power-accent-dim);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    0 0 20px var(--power-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.power-stat-card .power-score {
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: #fff;
  margin-top: 0.35rem;
}

.power-stat-card.is-ok { border-left-color: rgba(52, 211, 153, 0.7); }
.power-stat-card.is-warn { border-left-color: rgba(251, 191, 36, 0.7); }
.power-stat-card.is-danger { border-left-color: var(--power-accent); }

/* ========== PROGRESS ZONE ========== */
.power-progress-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.25rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .power-progress-zone {
    flex-direction: row;
    align-items: center;
    padding: 1.75rem 1.75rem;
    gap: 2.5rem;
  }
}

.power-progress-ring {
  width: 10rem;
  height: 10rem;
  flex-shrink: 0;
  position: relative;
}

.power-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 12px rgba(255, 59, 48, 0.25));
}

.cobro-ring-progress {
  transition: stroke-dashoffset 0.9s var(--power-ease);
}

.power-progress-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.power-progress-bar-track {
  height: 0.55rem;
  width: 100%;
  max-width: 28rem;
  background: #27272a;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.power-progress-bar-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 11px,
    rgba(0, 0, 0, 0.25) 11px,
    rgba(0, 0, 0, 0.25) 12px
  );
  pointer-events: none;
  z-index: 2;
}

.power-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b91c1c, #FF3B30 55%, #ff6b63);
  border-radius: 999px;
  transition: width 0.85s var(--power-ease);
  box-shadow: 0 0 12px var(--power-red-glow);
  position: relative;
  z-index: 1;
}

/* ========== CHART MONITOR ========== */
.power-monitor {
  padding: 1.15rem 1.25rem 1.25rem;
}

.power-monitor-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(39, 39, 42, 0.9);
}

.power-monitor-title h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4d4d8;
  margin: 0;
}

.power-monitor-title .tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--power-muted);
  border: 1px solid var(--power-border);
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
}

.power-monitor-body {
  height: 16rem;
  position: relative;
}

/* ========== MUTE ========== */
.power-mute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: #1c1c1f;
  border: 1px solid var(--power-border);
  color: #a1a1aa;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.power-mute-btn:hover {
  color: #fff;
  border-color: rgba(255, 59, 48, 0.5);
  transform: scale(1.02);
}

.power-mute-btn:active {
  transform: scale(0.98);
}

.power-mute-btn.is-muted {
  color: #71717a;
}

.power-mute-btn svg {
  display: block;
}

/* ========== TOASTS (esquina) ========== */
#power-fx-toast-root {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  top: auto;
  transform: none;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.45rem;
  pointer-events: none;
  width: min(92vw, 20rem);
}

.power-fx-toast {
  pointer-events: none;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-align: left;
  background: rgba(18, 18, 20, 0.96);
  color: #e4e4e7;
  border: 1px solid #3f3f46;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateX(18px);
  animation: power-toast-in 0.32s var(--power-ease) forwards;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.power-fx-toast::before {
  content: "▸";
  color: var(--power-red);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.power-fx-toast.out {
  animation: power-toast-out 0.28s ease forwards;
}

.power-fx-toast.ok {
  border-color: rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(18, 18, 20, 0.96) 40%);
}

.power-fx-toast.ok::before {
  content: "✓";
  color: #34d399;
}

.power-fx-toast.err {
  border-color: rgba(255, 59, 48, 0.55);
  color: #fca5a5;
  background: linear-gradient(90deg, rgba(255, 59, 48, 0.12), rgba(18, 18, 20, 0.96) 40%);
}

.power-fx-toast.err::before {
  content: "!";
  color: #FF3B30;
}

.power-fx-toast.achievement {
  border-color: rgba(255, 59, 48, 0.65);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255, 59, 48, 0.22), transparent 50%),
    rgba(18, 18, 20, 0.98);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  box-shadow:
    0 0 24px var(--power-red-soft),
    0 12px 36px rgba(0, 0, 0, 0.55);
}

.power-fx-toast.achievement::before {
  content: "★";
  color: #FF3B30;
}

@keyframes power-toast-in {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes power-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(16px); }
}

/* ========== CONFETTI / FLASH ========== */
#power-fx-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.power-fx-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  opacity: 0.95;
  animation: power-particle-fall linear forwards;
}

@keyframes power-particle-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx, 0), var(--dy, 80vh), 0) rotate(var(--rot, 180deg));
    opacity: 0;
  }
}

@keyframes power-border-flash {
  0% {
    box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.75), 0 0 32px var(--power-red-glow);
    border-color: rgba(255, 59, 48, 0.8);
  }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.power-flash-success {
  animation: power-border-flash 0.95s var(--power-ease);
}

@keyframes power-border-flash-ok {
  0% {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.7), 0 0 24px rgba(16, 185, 129, 0.28);
    border-color: rgba(16, 185, 129, 0.75);
  }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.power-flash-ok {
  animation: power-border-flash-ok 0.95s var(--power-ease);
}

/* ========== EMPTY / MISSION ========== */
.power-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--power-muted);
  font-size: 0.875rem;
}

.power-empty .mission {
  display: block;
  margin-top: 0.35rem;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 59, 48, 0.7);
}

/* ========== SCROLLBARS ========== */
.power-hud * {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 #18181b;
}

.power-hud *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.power-hud *::-webkit-scrollbar-track {
  background: #18181b;
}

.power-hud *::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 999px;
}

.power-hud *::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* ========== FOCUS ========== */
.power-hud :focus-visible {
  outline: 2px solid rgba(255, 59, 48, 0.55);
  outline-offset: 2px;
}

/* ========== SECTION HEAD ========== */
.power-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.power-section-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.power-section-head .sub {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--power-muted);
  letter-spacing: 0.04em;
}

/* ========== RESPONSIVE SCORE + NAV MÓVIL ========== */
@media (max-width: 767px) {
  .power-score-bar {
    grid-template-columns: 1fr;
  }
  .power-score-cell + .power-score-cell {
    border-left: 0;
    border-top: 1px solid rgba(39, 39, 42, 0.9);
    padding-top: 0.85rem;
  }
  .power-console-inner {
    padding: 0.5rem 0.75rem;
  }
  .power-console-header,
  .power-console-inner,
  #power-header-tools {
    overflow-x: hidden;
    max-width: 100%;
  }
  #power-header-tools {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }
  .power-mes-pill {
    min-width: 0;
    max-width: 7.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
  }
  .power-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    row-gap: 0.25rem;
  }
  .power-nav-slot {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.45rem;
    min-width: 2.85rem;
  }
  .power-nav-slot span.label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.04em;
    line-height: 1.1;
    max-width: 3.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .power-nav-slot .label-full {
    display: none;
  }
  .power-nav-slot .label-short {
    display: inline;
  }
  .power-nav-slot i {
    font-size: 1rem;
  }
  .power-page,
  .power-hud main,
  .power-hud main.power-page,
  .power-hud .power-page-shell {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .power-nav-slot {
    flex-direction: row;
  }
  .power-nav-slot span.label {
    display: inline;
    font-size: 0.7rem;
  }
  .power-nav-slot .label-full {
    display: inline;
  }
  .power-nav-slot .label-short {
    display: none;
  }
  .power-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Filter chips (alumnos) — RONDA 13: paleta neutra monocromática para los
   filtros regulares (Todos, Pago al día, Pendientes, En riesgo, Inactivos,
   Recientes) — deja de competir con la skin equipada por el usuario. Reposo:
   cristal oscuro + borde tenue + texto gris. Activo: resalte blanco/plata
   limpio, sin color temático. COMPANY es la única excepción: protagonista
   fijo en rojo carmesí (ver .filter-btn[data-tone="crimson"] más abajo), con
   glow potente al activarse para marcar la jerarquía de la Compañía. */
.power-hud .filter-btn.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}

/* COMPANY — único botón con acento de color fijo (rojo carmesí neón),
   protagonista sobre el resto de filtros administrativos neutros. */
.filter-btn[data-tone="crimson"] {
  border-color: rgba(239, 68, 68, 0.8) !important;
  color: #f87171 !important;
}
.power-hud .filter-btn[data-tone="crimson"].active {
  background: rgba(220, 38, 38, 0.25) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.55);
  color: #fff !important;
  font-weight: 800;
}

/* Profe cards lift */
.power-hud .profe-card {
  transition: transform 0.15s var(--power-ease), box-shadow 0.2s ease, border-color 0.15s ease;
}
.power-hud .profe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 16px var(--power-red-dim);
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  body.power-hud::before,
  body.power-hud::after {
    opacity: 0.15;
  }
  .power-session-pill .dot {
    animation: none;
  }
  .power-hud button:not(:disabled):hover,
  .power-hud button:not(:disabled):active,
  .power-nav-slot:hover,
  .power-nav-slot:active,
  .power-cta:hover,
  .power-cta:active,
  .power-stat-card:hover,
  .power-mute-btn:hover {
    transform: none;
  }
  .power-fx-toast,
  .power-fx-toast.out {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .power-flash-success,
  .power-flash-ok {
    animation: none;
  }
  .power-fx-particle {
    display: none !important;
  }
  .power-progress-bar-fill,
  .cobro-ring-progress,
  .power-score-ring-progress {
    transition: none !important;
  }
}

/* ========== RPG CHARACTER CARDS (alumnos) ========== */
.rpg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: 1rem;
  padding-top: 0.9rem;
  background: linear-gradient(165deg, #1a1a1d 0%, #0e0e10 100%);
  border: 1px solid var(--power-border);
  border-radius: 1.15rem;
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.2s var(--power-ease), border-color 0.2s ease, box-shadow 0.25s ease;
  animation: rpg-card-in 0.35s var(--power-ease) both;
}
@keyframes rpg-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.rpg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(#FF3B30, #FF3B30) top left / 12px 2px no-repeat,
    linear-gradient(#FF3B30, #FF3B30) 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;
  opacity: 0.55;
  z-index: 0;
}
.rpg-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 59, 48, 0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 0 22px var(--power-red-dim);
}
.rpg-card.is-ok {
  border-color: rgba(52, 211, 153, 0.28);
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.55);
}
.rpg-card.is-ok:hover {
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.7), 0 10px 28px rgba(0,0,0,0.35);
}
.rpg-card.is-pendiente {
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.45);
}
.rpg-card.is-riesgo {
  border-color: rgba(255, 59, 48, 0.55);
  box-shadow: inset 3px 0 0 rgba(255, 59, 48, 0.75), 0 0 0 0 rgba(255, 59, 48, 0);
  animation: rpg-card-in 0.35s var(--power-ease) both, rpg-riesgo-pulse 2.2s ease-in-out infinite;
}
@keyframes rpg-riesgo-pulse {
  0%, 100% {
    box-shadow: inset 3px 0 0 rgba(255, 59, 48, 0.75), 0 0 10px rgba(255, 59, 48, 0.12);
    border-color: rgba(255, 59, 48, 0.45);
  }
  50% {
    box-shadow: inset 3px 0 0 rgba(255, 59, 48, 0.9), 0 0 18px rgba(255, 59, 48, 0.28);
    border-color: rgba(255, 59, 48, 0.7);
  }
}
.rpg-card.is-company {
  border-color: rgba(255, 59, 48, 0.5);
}
.rpg-card.is-inactivo {
  opacity: 0.72;
  box-shadow: inset 3px 0 0 #3f3f46;
}
.rpg-card-actions {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.rpg-card-actions .edit-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  color: #71717a;
  background: rgba(24, 24, 27, 0.9);
  border: 1px solid #3f3f46;
}
.rpg-card-actions .edit-btn:hover {
  color: #fff;
  border-color: #52525b;
}
.rpg-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.85rem;
  align-items: stretch;
  padding-right: 4.25rem;
  min-width: 0;
}
.rpg-avatar-frame {
  flex-shrink: 0;
  width: 84px;
  height: 112px;
  border-radius: 0.65rem;
  padding: 3px;
  background: linear-gradient(145deg, rgba(255,59,48,0.45), #3f3f46 40%, #18181b);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.rpg-avatar-frame > * {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0.5rem;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #d4d4d8;
  background: #18181b;
  border: none !important;
}
.rpg-card.is-ok .rpg-avatar-frame {
  background: linear-gradient(145deg, rgba(52,211,153,0.45), #3f3f46 45%, #18181b);
}
.rpg-card-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.rpg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
  max-width: 100%;
}
.rpg-badges > * {
  flex-shrink: 0;
}
.rpg-name {
  font-size: 0.95rem;
  font-weight: 650;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.rpg-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #71717a;
  letter-spacing: 0.04em;
  margin: 0;
}
.rpg-tel {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin: 0.2rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpg-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #52525b;
  margin-top: auto;
  padding-top: 0.35rem;
}

/* Toolbar search + filters — RONDA 15: fila única en toda resolución (el
   viejo flex-direction:column/@media(min-width:640px) quedaba anulado por
   reglas !important de mayor especificidad más abajo; se deja ya en fila
   acá también para que no haya dos fuentes de verdad contradictorias). */
.power-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.power-search {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: #18181b;
  border: 1px solid var(--power-border);
  border-radius: 0.85rem;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: #e4e4e7;
}
.power-search:focus {
  outline: none;
  border-color: rgba(255, 59, 48, 0.5);
}
/* RONDA 15: dock de filtros — carrusel horizontal fluido SIEMPRE (nowrap +
   scroll si no entra), alineado a la izquierda igual que la barra de
   búsqueda y el grid (mismo ancho de <main>, sin max-width ni centrado
   propios — ver nota junto a #alu-toolbar más abajo). Se eliminó el
   @media(min-width:768px){flex-wrap:wrap; justify-content:center} de la
   ronda anterior: era la causa de la "desalineación en PC" — centraba los
   chips mientras buscador+botón quedaban alineados a la izquierda. Gap
   compacto (gap-1.5). */
.power-filters-scroll,
#filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  overflow-x: auto;
  padding: 0.2rem 0.1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.power-filters-scroll::-webkit-scrollbar,
#filters::-webkit-scrollbar {
  display: none; /* WebKit */
}
.power-filters-scroll .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  min-height: 30px;
  max-height: 32px;
  white-space: nowrap;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a1a1aa;
  background: rgba(24, 24, 27, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.power-filters-scroll .filter-btn:hover {
  color: #e4e4e7;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(39, 39, 42, 0.75);
}
.power-filters-scroll .filter-btn:active {
  transform: scale(0.96);
}

/* ========== GLOBAL MODAL / OVERLAY SHELL ========== */
/* Ronda H — Problema 2: patrón de anclaje centrado obligatorio.
   position:fixed + inset:0 + display:grid + place-items:center + z-index
   alto garantizan que el modal nazca siempre en el centro exacto del
   viewport visible, sin depender de scroll ni de la altura del contenido. */
.power-hud [id$="-modal"],
.power-hud .power-modal-root,
.pw-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999;
  box-sizing: border-box;
  margin: 0 !important;
}

.power-hud [id$="-modal"].hidden,
.power-hud .power-modal-root.hidden,
.pw-overlay.hidden {
  display: none !important;
}

.power-hud [id$="-modal"]:not(.hidden),
.power-hud .power-modal-root:not(.hidden),
.pw-overlay:not(.hidden) {
  display: grid !important;
  place-items: center !important;
  padding: 1rem !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Ronda H: alineados al mismo nivel que el resto de modales (antes 60/200,
   quedaban por debajo del header/avisos por especificidad de ID — ver
   comentario en el bloque "Z-index jerárquico"). #venta-detalle-modal
   conserva su jerarquía relativa por encima de los demás. */
.power-hud #renovar-modal:not(.hidden),
.power-hud #form-modal:not(.hidden) {
  z-index: 99999 !important;
}
.power-hud #venta-detalle-modal:not(.hidden) {
  z-index: 100000 !important;
}

.power-hud [id$="-modal"] > .absolute.inset-0,
.power-hud [id$="-modal"] > [id$="-backdrop"],
.power-hud [id$="-modal"] > [id$="backdrop"],
.power-hud .power-modal-backdrop,
.pw-overlay > .pw-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(0, 0, 0, 0.78) !important;
  pointer-events: auto;
}

.power-hud [id$="-modal"] > .relative.min-h-full,
.power-hud [id$="-modal"] > div.relative.min-h-full {
  display: contents !important;
}

.power-hud [id$="-modal"] > .relative:not(.absolute):not(.min-h-full),
.power-hud [id$="-modal"] > .relative.min-h-full > .relative,
.power-hud [id$="-modal"] > .relative.min-h-full > div:not(.absolute),
.power-hud .power-modal-dialog,
.pw-panel {
  position: relative !important;
  z-index: 1 !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: auto !important;
  width: min(560px, 100%) !important;
  max-width: 100% !important;
  max-height: min(90vh, 100dvh) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch;
}

.power-hud [id$="-modal"] > .max-w-sm,
.power-hud [id$="-modal"] .pw-panel.max-w-sm,
.power-hud .pw-overlay > .max-w-sm {
  width: min(24rem, 100%) !important;
}
.power-hud [id$="-modal"] > .max-w-md,
.power-hud [id$="-modal"] .pw-panel.max-w-md,
.power-hud .pw-overlay > .max-w-md {
  width: min(28rem, 100%) !important;
}
.power-hud [id$="-modal"] > .max-w-lg,
.power-hud [id$="-modal"] .pw-panel.max-w-lg,
.power-hud #curso-modal .max-w-lg,
.power-hud #cursos-modal .max-w-lg,
.power-hud .pw-overlay > .max-w-lg {
  width: min(32rem, 100%) !important;
}
.power-hud [id$="-modal"] > .max-w-xl,
.power-hud .pw-overlay > .max-w-xl {
  width: min(36rem, 100%) !important;
}
.power-hud .power-modal-dialog,
.power-hud .power-modal-dialog.max-w-5xl,
.power-hud #reporte-modal .power-modal-dialog {
  width: min(64rem, 100%) !important;
  background: linear-gradient(165deg, #18181b, #0e0e10);
  border: 1px solid var(--power-border);
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.power-hud #cursos-modal .max-w-lg,
.power-hud #cursos-modal .pw-panel--sheet {
  max-height: min(85dvh, 90vh) !important;
  width: min(32rem, 100%) !important;
  border-radius: 1.25rem;
}

.pw-sheet-handle {
  flex-shrink: 0;
  width: 2.5rem;
  height: 0.28rem;
  border-radius: 999px;
  background: #3f3f46;
  margin: 0.55rem auto 0.15rem;
}

.power-modal-head,
.pw-panel-head {
  flex-shrink: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--power-border);
  background: rgba(18, 18, 20, 0.96);
}

.power-modal-body,
.pw-panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 1rem 1.15rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.power-modal-foot,
.pw-panel-foot {
  flex-shrink: 0 !important;
  padding: 0.75rem 1.15rem 1rem;
  border-top: 1px solid var(--power-border);
  background: rgba(18, 18, 20, 0.96);
}

.power-hud #cursos-list,
.power-hud #modal-alumnos-list,
.power-hud #ficha-modal .overflow-y-auto,
.power-hud #renovar-modal .overflow-y-auto,
.power-hud #form-modal .pw-panel-body,
.power-hud #form-modal form {
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.power-hud #cursos-extra-section:not(.hidden) {
  flex-shrink: 0 !important;
  max-height: min(28vh, 12rem) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.power-hud #cursos-extra-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

@media (max-width: 639px) {
  .power-hud [id$="-modal"]:not(.hidden),
  .power-hud .power-modal-root:not(.hidden),
  .pw-overlay:not(.hidden) {
    padding: 0.5rem !important;
    align-items: center !important;
  }
  .power-hud [id$="-modal"] > .relative:not(.absolute):not(.min-h-full),
  .power-hud [id$="-modal"] > .relative.min-h-full > div:not(.absolute),
  .power-hud .power-modal-dialog,
  .pw-panel {
    max-height: min(96dvh, 100vh) !important;
    width: 100% !important;
    border-radius: 1.15rem !important;
  }
  .power-hud #cursos-modal .max-w-lg {
    max-height: min(90dvh, 100vh) !important;
    width: 100% !important;
  }
}

body.pw-modal-open,
body.overflow-hidden {
  overflow: hidden !important;
}
body.overflow-hidden .pw-panel,
body.overflow-hidden .pw-panel-body,
body.overflow-hidden #ficha-historial,
body.overflow-hidden #venta-detalle-modal {
  touch-action: manipulation;
  pointer-events: auto;
}

/* ========== PROFE CHARACTER ========== */
.profe-card.rpg-profe {
  min-height: auto;
  max-height: none;
  height: auto;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--power-ease), box-shadow 0.25s ease, border-color 0.2s ease;
  animation: rpg-card-in 0.4s var(--power-ease) both;
}
.profe-card.rpg-profe:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 18px var(--power-red-dim);
}
.profe-card.rpg-profe.is-cleared {
  border-color: rgba(52, 211, 153, 0.3);
  opacity: 0.92;
}
.profe-card.rpg-profe.is-cleared:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.profe-avatar-slot {
  width: 56px;
  height: 56px;
  border-radius: 0.85rem;
  flex-shrink: 0;
  padding: 2px;
  background: linear-gradient(145deg, rgba(255,59,48,0.5), #3f3f46 50%, #18181b);
  overflow: hidden;
}
.profe-avatar-slot img,
.profe-avatar-slot .profe-mono {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #18181b;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #e4e4e7;
}
.btn-reward {
  background: var(--power-accent) !important;
  border: 1px solid var(--power-accent-dim);
  box-shadow: 0 0 18px var(--power-accent-glow);
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  min-height: 44px;
  color: #fff !important;
}
.btn-reward:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 26px var(--power-accent-glow);
}

/* ========== MOBILE APP-LIKE ========== */
@media (max-width: 767px) {
  body.power-hud {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .power-console-inner {
    padding: 0.45rem 0.75rem;
    gap: 0.5rem;
  }
  .power-nav {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .power-nav::-webkit-scrollbar { display: none; }
  .power-nav-slot {
    min-height: 44px;
    flex-shrink: 0;
  }
  .power-cta {
    min-height: 44px;
    padding: 0.7rem 1rem;
  }
  .dash-action-bar {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
  }
  .dash-action-bar .power-cta,
  .dash-action-bar #btn-reporte,
  .dash-action-bar #btn-memory-card {
    border-radius: 14px;
    border: 1px solid var(--power-accent-dim);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-height: 44px;
  }
  .dash-action-bar .power-cta {
    flex: 2;
    justify-content: center;
    color: #fff !important;
    background: color-mix(in srgb, var(--power-accent) 88%, transparent);
    box-shadow: 0 4px 15px var(--power-accent-glow);
  }
  .dash-action-bar #btn-reporte,
  .dash-action-bar #btn-memory-card {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
  .power-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .power-score-bar {
    grid-template-columns: 1fr;
    padding: 12px 16px;
    border-radius: 16px;
  }
  .power-stat-card {
    padding: 12px 16px;
    border-radius: 16px;
  }
  .power-score-cell .power-score,
  .power-stat-card .power-score {
    font-size: clamp(1.15rem, 5.2vw, 1.7rem);
  }
  #grid.grid,
  #lista-profes {
    grid-template-columns: 1fr !important;
  }
  .rpg-card {
    min-height: 0;
  }
  .rpg-avatar-frame {
    width: 72px;
    height: 96px;
  }
  .power-section-head {
    gap: 0.75rem;
  }
  .power-section-head h2 {
    font-size: 1.25rem;
  }
  .power-hud [id$="-modal"]:not(.hidden) > .relative.min-h-full > div,
  .power-hud [id$="-modal"]:not(.hidden) > div.relative.w-full {
    max-height: 96dvh;
  }
}

.power-hud .power-cta,
.power-hud button.bg-red-600,
.power-hud #btn-register {
  min-height: 44px;
}

.power-monitor-body canvas {
  cursor: crosshair;
}

@media (prefers-reduced-motion: reduce) {
  .rpg-card,
  .profe-card.rpg-profe {
    animation: none !important;
  }
  .rpg-card.is-riesgo {
    animation: none !important;
    box-shadow: inset 3px 0 0 rgba(255, 59, 48, 0.75);
  }
  .rpg-card:hover,
  .profe-card.rpg-profe:hover {
    transform: none;
  }
}

/* ========== LED REWARD ========== */
.power-led-reward {
  position: relative;
  z-index: 1;
  animation: power-electric-glow 0.95s ease-out;
}
.power-led-reward::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 30;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 59, 48, 0.15) 20%,
    #FF3B30 45%,
    #fff 50%,
    #FF3B30 55%,
    rgba(255, 59, 48, 0.15) 80%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: power-led-run 0.95s linear forwards;
  -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;
  padding: 2px;
  box-sizing: border-box;
}
@keyframes power-led-run {
  from { background-position: 120% 0; opacity: 1; }
  to { background-position: -120% 0; opacity: 0.35; }
}
@keyframes power-electric-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0), 0 0 0 1px rgba(255, 59, 48, 0.3); }
  30% { box-shadow: 0 0 32px rgba(255, 59, 48, 0.55), 0 0 0 1px rgba(255, 59, 48, 0.85); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 1px transparent; }
}
.power-led-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: 0;
  box-shadow: inset 0 0 0 0 transparent;
}
.power-led-overlay.run {
  animation: power-led-overlay-run 1s ease-out forwards;
}
@keyframes power-led-overlay-run {
  0% { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 59, 48, 0.9), inset 0 0 40px rgba(255, 59, 48, 0.25); }
  100% { opacity: 0; box-shadow: inset 0 0 0 0 transparent; }
}

/* ========== THERMOMETER / XP ========== */
.power-thermo {
  height: 0.55rem;
  width: 100%;
  border-radius: 999px;
  background: #27272a;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.power-thermo-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1), background 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.35);
}
.power-thermo-fill.lvl-high { background: linear-gradient(90deg, #059669, #34d399); box-shadow: 0 0 10px rgba(52,211,153,0.4); }
.power-thermo-fill.lvl-mid { background: linear-gradient(90deg, #d97706, #fbbf24); box-shadow: 0 0 10px rgba(251,191,36,0.35); }
.power-thermo-fill.lvl-low { background: linear-gradient(90deg, #b91c1c, #FF3B30); }

.company-rpg-card {
  position: relative;
  padding: 1rem;
  border-radius: 1.15rem;
  background: linear-gradient(165deg, #1a1a1d, #0e0e10);
  border: 1px solid #27272a;
  overflow: hidden;
}
.company-rpg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(#FF3B30, #FF3B30) top left / 12px 2px no-repeat,
    linear-gradient(#FF3B30, #FF3B30) top left / 2px 12px no-repeat;
  opacity: 0.6;
}

.checkin-reward {
  text-align: center;
  padding: 2rem 1.25rem;
}
.checkin-reward .bolt {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #FF3B30;
  background: rgba(255, 59, 48, 0.12);
  border: 1px solid rgba(255, 59, 48, 0.45);
  box-shadow: 0 0 40px rgba(255, 59, 48, 0.35);
  animation: login-pulse 1.2s ease-in-out infinite;
}
.checkin-reward h2 {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .power-led-reward,
  .power-led-reward::after,
  .power-led-overlay.run,
  .checkin-reward .bolt {
    animation: none !important;
  }
}

/* ========== RESPONSIVE LAYOUT + MODAL STACK ========== */

.power-hud #ficha-modal:not(.hidden) { z-index: 99999 !important; }
.power-hud #renovar-modal:not(.hidden),
.power-hud #form-modal:not(.hidden) { z-index: 99999 !important; }
.power-hud #venta-detalle-modal:not(.hidden) {
  z-index: 100000 !important;
}

.power-hud [id$="-modal"]:not(.hidden) > .pw-panel,
.power-hud [id$="-modal"]:not(.hidden) > .relative:not(.absolute):not(.min-h-full),
.pw-overlay:not(.hidden) > .pw-panel {
  animation: pw-modal-in 0.22s var(--power-ease) both;
}
@keyframes pw-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.power-page,
.power-hud main,
.power-hud .power-page-shell {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .power-page,
  .power-hud main,
  .power-hud .power-page-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
}
@media (min-width: 1024px) {
  .power-page,
  .power-hud main,
  .power-hud .power-page-shell {
    max-width: 80rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2.5rem;
  }
}

.power-hud #grid,
.power-hud #cursos-grid,
.power-hud #company-grid,
.power-hud #lista-profes {
  gap: 1.1rem !important;
}

@media (min-width: 768px) {
  .power-toolbar {
    gap: 0.85rem;
    margin-bottom: 1.25rem;
  }
  .power-search {
    min-width: 16rem;
  }
}

.power-console-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 1024px) {
  .power-console-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.power-loader,
#power-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(9, 9, 11, 0.92);
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.power-loader.is-hidden,
#power-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.power-loader-bolt,
#power-loader .power-loader-bolt {
  height: 4.25rem;
  width: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(255, 59, 48, 0.4));
  animation: power-loader-pulse 1.35s ease-in-out infinite;
}
.power-loader-text,
#power-loader .power-loader-text {
  margin-top: 0.9rem;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #71717a;
}
@keyframes power-loader-pulse {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@media (hover: hover) {
  .power-hud .rpg-card,
  .power-hud .power-stat-card,
  .power-hud .curso-card,
  .power-hud .company-rpg-card {
    transition: transform 0.2s var(--power-ease), border-color 0.18s ease, box-shadow 0.22s ease;
  }
}

.power-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent 0%, rgba(9,9,11,0.92) 30%, #09090b 100%);
  border-top: 1px solid rgba(39, 39, 42, 0.85);
  backdrop-filter: blur(8px);
}
@media (min-width: 1024px) {
  .power-sticky-cta { display: none; }
}

@media (max-width: 639px) {
  .power-hud input,
  .power-hud select,
  .power-hud textarea {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .power-hud [id$="-modal"]:not(.hidden) > .pw-panel,
  .power-hud [id$="-modal"]:not(.hidden) > .relative:not(.absolute),
  .power-loader-bolt,
  #power-loader .power-loader-bolt {
    animation: none !important;
  }
}

/* ========== OLA 1.5 — UI POLISH ========== */
:root { --power-dur-fast: 0.15s; --power-dur: 0.2s; --power-dur-slow: 0.25s; --power-radius: 1rem; --power-radius-sm: 0.75rem; }
.power-hud .power-page, .power-hud main.power-page, .power-hud > main, .power-hud .power-page-shell { animation: pw-page-in 0.28s var(--power-ease) both; }
@keyframes pw-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.power-section-head { position: relative; padding-bottom: 0.85rem; margin-bottom: 1.35rem; border-bottom: 1px solid rgba(39, 39, 42, 0.85); }
.power-section-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3.5rem; height: 2px; background: linear-gradient(90deg, var(--power-red), transparent); border-radius: 999px; }
.power-search:focus { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12); }
.pw-overlay { display: grid !important; place-items: center !important; padding: 16px !important; position: fixed !important; inset: 0 !important; z-index: 99999; }
.pw-panel { max-width: 90vw !important; margin: 0 auto !important; max-height: 90vh !important; overflow-y: auto !important; position: relative !important; z-index: 1 !important; width: min(560px, 100%) !important; background: linear-gradient(165deg, #18181b, #0e0e10); border: 1px solid var(--power-border); border-radius: 1.25rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.pw-backdrop { position: absolute !important; inset: 0 !important; z-index: 0 !important; background: rgba(0, 0, 0, 0.78) !important; }

/* ==========================================================================
   RESTRUCTURACIÓN DEL HEADER Y SKINS (FLEXBOX NATIVO)
   ========================================================================== */

/* Tokens extra (no pisan --power-accent Power red de :root) */
:root {
  --power-bg-header: rgba(9, 9, 11, 0.88);
  --power-bg-card: #1e293b;
  --power-text-main: #f8fafc;
  --power-text-muted: #94a3b8;
}

[data-power-accent="cafe-con-leche"],
html[data-power-accent="cafe-con-leche"],
html.accent-skin-cafe-con-leche,
html[data-power-skin="cafe-con-leche"],
body[data-power-accent="cafe-con-leche"] {
  --power-accent: #d4a373;
  --power-accent-soft: rgba(212, 163, 115, 0.15);
  --power-bg-header: #141211;
  --power-bg-card: #262321;
  --power-border: rgba(212, 163, 115, 0.25);
  --power-text-main: #f5f5f4;
  --power-text-muted: #a8a29e;
}

html[data-power-accent="cafe-con-leche"] .curso-card,
html[data-power-accent="cafe-con-leche"] .rpg-card,
html.accent-skin-cafe-con-leche .curso-card,
html.accent-skin-cafe-con-leche .rpg-card {
  background-color: var(--power-bg-card);
  border-color: var(--power-border);
}

/* Header base — clase real: .power-console-header */
.power-header,
.power-console-header {
  width: 100%;
  background-color: var(--power-bg-header);
  border-bottom: 1px solid var(--power-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.power-console-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 24px;
  box-sizing: border-box;
  gap: 16px;
  position: relative;
}

.power-header-brand-container,
.power-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Nav y tools son hermanos flex (el HTML anida el nav dentro de tools) */
.power-header-tools,
#power-header-tools {
  display: contents;
}

/* Centrado nativo en PC con Flexbox — sin position:absolute */
#power-main-nav,
.power-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  order: 2;
  position: static;
  transform: none;
  left: auto;
}

.power-header-end,
.power-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  order: 3;
}

.power-header-actions {
  order: 4;
}

.power-nav-link,
.power-nav-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--power-text-muted);
  text-decoration: none;
}

.power-nav-link:hover,
.power-nav-link.active,
.power-nav-slot:hover,
.power-nav-slot.is-active,
.power-nav-slot[aria-current="page"] {
  color: var(--power-text-main);
  background-color: var(--power-accent-soft);
}

/* Modo móvil: fila 1 logo+sesión, fila 2 carrusel; íconos 20px */
@media (max-width: 767px) {
  .power-console-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
  }

  .power-header-brand-container {
    order: 1;
  }

  .power-header-end {
    order: 2;
    margin-left: auto;
  }

  .power-header-actions {
    order: 3;
  }

  #power-main-nav,
  .power-nav {
    flex: 1 1 100%;
    order: 10;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
    width: 100%;
    transform: none;
    position: static;
  }

  #power-main-nav::-webkit-scrollbar,
  .power-nav::-webkit-scrollbar {
    display: none;
  }

  .power-nav-link,
  .power-nav-slot {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 8px 12px;
  }

  .power-nav-link svg,
  .power-nav-link i,
  .power-nav-slot svg,
  .power-nav-slot i,
  .power-nav-icon {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    font-size: 20px;
  }
}

/* ==========================================================================
   CAPAS, MODALES OCULTOS, DASHBOARD Y BOTONES
   ========================================================================== */

/* Z-index jerárquico (Ronda H): header 100 · avisos 500 · modal 99999
   (Problema 2 — anclaje centrado obligatorio, ver GLOBAL MODAL / OVERLAY
   SHELL) · toast 100000 (siempre por encima de un modal abierto).
   No se aplica z-index a body.power-hud (crearía un stacking context global). */
.power-header,
.power-console-header {
  z-index: 100;
}
#hud-notif-center,
#power-notif-panel {
  z-index: 500 !important;
}
.power-modal:not(.hidden),
.power-hud [id$="-modal"]:not(.hidden),
.power-hud .power-modal-root:not(.hidden),
.pw-overlay:not(.hidden) {
  z-index: 99999 !important;
}
.power-toast,
.power-tooltip,
#power-fx-toast-root,
.power-fx-toast {
  z-index: 100000 !important;
}

/* Modales ocultos: ni flex forzado ni captura de clics */
.power-modal.hidden,
.power-hud [id$="-modal"].hidden,
.power-hud .power-modal-root.hidden,
.pw-overlay.hidden,
#hud-notif-center.hidden,
.power-modal[hidden],
.power-hud [id$="-modal"][hidden],
.pw-overlay[hidden],
.power-modal[style*="display: none"],
.power-modal[style*="display:none"],
.power-hud [id$="-modal"][style*="display: none"],
.power-hud [id$="-modal"][style*="display:none"],
.pw-overlay[style*="display: none"],
.pw-overlay[style*="display:none"] {
  display: none !important;
  pointer-events: none !important;
}
.power-modal.hidden *,
.power-hud [id$="-modal"].hidden *,
.pw-overlay.hidden *,
#hud-notif-center.hidden * {
  pointer-events: none !important;
}

/* Retícula dashboard / RPG */
.power-dashboard-grid,
.rpg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
}
.power-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  box-sizing: border-box;
}

/* Tarjetas */
.power-card,
.rpg-card,
.curso-card {
  background-color: var(--power-bg-card);
  border: 1px solid var(--power-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Métricas: título / número / secundario */
.power-label,
.power-hud .power-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--power-text-muted);
}
.power-score,
.power-stat-card .power-score,
.power-score-cell .power-score {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--power-accent);
  line-height: 1.2;
}
.power-stat-card .text-xs,
.power-score-cell .text-xs,
.power-stat-card [id$="-sub"],
.power-score-cell [id$="-sub"] {
  font-size: 0.85rem;
  color: var(--power-text-muted);
}

/* Botones base — no toca .power-cta / .power-nav-slot / .filter-btn / mute */
.power-btn,
.pw-btn,
.btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}

/* ==========================================================================
   UNIFICACIÓN DE SKINS Y ARTE VISUAL MODERNO
   ========================================================================== */

.btn-primary,
.btn-checkin,
.btn-checkin-quick:not(.is-done),
.btn-checkin-one:not(.is-done),
.checkin-btn,
.btn-accent,
.power-cta,
button[class*="bg-red"]:not(.btn-danger):not(.bg-danger):not(#btn-inactivar-alumno):not(#btn-hard-eliminar-alumno):not(.btn-rechazar) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--power-accent) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 14px var(--power-accent-soft) !important;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover:not(:disabled),
.btn-checkin:hover:not(:disabled),
.btn-checkin-quick:hover:not(:disabled):not(.is-done),
.btn-checkin-one:hover:not(:disabled):not(.is-done),
.checkin-btn:hover:not(:disabled),
.btn-accent:hover:not(:disabled),
.power-cta:hover:not(:disabled),
button[class*="bg-red"]:not(.btn-danger):not(.bg-danger):not(#btn-inactivar-alumno):not(#btn-hard-eliminar-alumno):not(.btn-rechazar):hover:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-checkin-quick:active:not(:disabled):not(.is-done),
.power-cta:active:not(:disabled) {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.1);
  box-shadow: 0 6px 20px var(--power-accent-soft) !important;
}

html[data-power-accent="gold"] .power-cta,
html.accent-skin-gold .power-cta {
  color: #1a1408 !important;
}
html[data-power-accent="cafe-con-leche"] .power-cta,
html.accent-skin-cafe-con-leche .power-cta {
  color: #120c08 !important;
}

.btn-danger,
.bg-danger,
#btn-inactivar-alumno,
#btn-hard-eliminar-alumno,
.btn-rechazar {
  background: #b91c1c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.28) !important;
}

.rpg-card,
.alumno-card,
.asistencia-card,
.company-rpg-card,
.power-card {
  background: var(--power-bg-card) !important;
  border: 1px solid var(--power-border) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.rpg-card:hover,
.alumno-card:hover,
.asistencia-card:hover,
.company-rpg-card:hover,
.power-card:hover {
  border-color: var(--power-accent) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 12px var(--power-accent-soft) !important;
}

.btn-primary i,
.btn-primary svg,
.btn-checkin i,
.btn-checkin svg,
.btn-checkin-quick i,
.btn-checkin-quick svg,
.btn-checkin-one i,
.btn-checkin-one svg,
.checkin-btn i,
.checkin-btn svg,
.btn-accent i,
.btn-accent svg,
.power-cta i,
.power-cta svg,
button[class*="bg-red"] i,
button[class*="bg-red"] svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: inherit;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .btn-primary i,
  .btn-primary svg,
  .btn-checkin-quick i,
  .btn-checkin-quick svg,
  .power-cta i,
  .power-cta svg {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
}

.power-pill,
.status-pill,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--power-accent-soft);
  color: var(--power-accent);
  border: 1px solid var(--power-accent);
}

/* ==========================================================================
   HEADER COMPACTO + BATERÍA ANIMADA POR SKIN
   ========================================================================== */

.power-console-header #brand-home,
.power-console-header .power-brand {
  cursor: pointer;
  filter: drop-shadow(0 0 8px var(--power-accent-soft));
  animation: powerBatteryIdle 3s infinite ease-in-out;
  transform-origin: center center;
  will-change: transform, filter;
}
.power-console-header .power-brand-icon,
.power-console-header .power-brand svg,
.power-console-header #brand-home svg {
  filter: drop-shadow(0 0 8px var(--power-accent-soft));
  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.power-console-header .power-brand svg,
.power-console-header #brand-home svg {
  stroke: var(--power-accent) !important;
  fill: transparent;
}

@keyframes powerBatteryIdle {
  0%, 100% {
    filter: drop-shadow(0 0 6px var(--power-accent-soft)) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 16px var(--power-accent)) brightness(1.25);
    transform: scale(1.04);
  }
}

.power-console-header #brand-home.has-notif,
.power-console-header #brand-home.has-unread,
.power-console-header .power-brand.has-notif,
.power-console-header .power-brand.has-unread {
  animation: powerBatteryAlert 1.2s infinite ease-in-out !important;
}

@keyframes powerBatteryAlert {
  0%, 100% {
    filter: drop-shadow(0 0 8px #ff3b30) drop-shadow(0 0 16px var(--power-accent)) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 22px #ff3b30) drop-shadow(0 0 28px var(--power-accent)) brightness(1.4);
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .power-console-header #brand-home,
  .power-console-header .power-brand,
  .power-console-header #brand-home.has-notif,
  .power-console-header .power-brand.has-notif {
    animation: none !important;
    transform: none;
    filter: drop-shadow(0 0 8px var(--power-accent-soft));
  }
}

@media (min-width: 768px) {
  .power-console-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .power-header-tools,
  #power-header-tools {
    display: contents;
  }

  #power-main-nav,
  .power-console-header .power-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    min-width: 0;
  }
  #power-main-nav::-webkit-scrollbar,
  .power-console-header .power-nav::-webkit-scrollbar {
    display: none !important;
  }

  .power-nav-link,
  .power-nav-slot {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
    border-radius: 6px !important;
    color: var(--power-text-muted) !important;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.2s ease !important;
  }

  .power-nav-link:hover,
  .power-nav-link.active,
  .power-nav-slot:hover,
  .power-nav-slot.is-active,
  .power-nav-slot[aria-current="page"] {
    color: var(--power-text-main) !important;
    background-color: var(--power-accent-soft) !important;
    box-shadow: 0 2px 8px var(--power-accent-soft) !important;
  }

  .power-header-end,
  .power-header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   ANIMACIONES DE BATERÍA PERSONALIZADAS POR SKIN
   ========================================================================== */

/* Default: acento activo (--power-accent), no índigo de plantilla */
.power-console-header .power-brand,
.power-console-header #brand-home {
  animation: batteryIdleDefault 3s infinite ease-in-out;
}
.power-console-header .power-brand.has-notif,
.power-console-header #brand-home.has-notif,
.power-console-header .power-brand.has-unread,
.power-console-header #brand-home.has-unread {
  animation: batteryAlertDefault 1s infinite ease-in-out !important;
}

@keyframes batteryIdleDefault {
  0%, 100% {
    filter: drop-shadow(0 0 6px var(--power-accent-soft));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 16px var(--power-accent));
    transform: scale(1.05);
  }
}

@keyframes batteryAlertDefault {
  0%, 100% {
    filter: drop-shadow(0 0 8px #ff3b30) drop-shadow(0 0 16px var(--power-accent));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 24px #ff3b30) drop-shadow(0 0 32px var(--power-accent));
    transform: scale(1.1);
  }
}

/* Café con leche */
html[data-power-accent="cafe-con-leche"] .power-console-header .power-brand,
html[data-power-accent="cafe-con-leche"] .power-console-header #brand-home,
html.accent-skin-cafe-con-leche .power-console-header .power-brand,
html.accent-skin-cafe-con-leche .power-console-header #brand-home,
html[data-power-skin="cafe-con-leche"] .power-console-header .power-brand,
body[data-power-accent="cafe-con-leche"] .power-console-header .power-brand,
body[data-power-accent="cafe-con-leche"] .power-console-header #brand-home {
  animation: batteryIdleCafe 3.5s infinite ease-in-out !important;
}

html[data-power-accent="cafe-con-leche"] .power-console-header .power-brand.has-notif,
html[data-power-accent="cafe-con-leche"] .power-console-header #brand-home.has-notif,
html[data-power-accent="cafe-con-leche"] .power-console-header .power-brand.has-unread,
html[data-power-accent="cafe-con-leche"] .power-console-header #brand-home.has-unread,
html.accent-skin-cafe-con-leche .power-console-header .power-brand.has-notif,
html.accent-skin-cafe-con-leche .power-console-header #brand-home.has-notif,
body[data-power-accent="cafe-con-leche"] .power-console-header .power-brand.has-notif,
body[data-power-accent="cafe-con-leche"] .power-console-header #brand-home.has-notif {
  animation: batteryAlertCafe 1.1s infinite ease-in-out !important;
}

@keyframes batteryIdleCafe {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(212, 163, 115, 0.4)) drop-shadow(0 0 2px #faedcd);
    transform: scale(1) translateY(0);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(212, 163, 115, 0.95)) drop-shadow(0 0 10px #d4a373);
    transform: scale(1.06) translateY(-1px);
  }
}

@keyframes batteryAlertCafe {
  0%, 100% {
    filter: drop-shadow(0 0 10px #e63946) drop-shadow(0 0 18px #d4a373);
    transform: scale(1) rotate(0deg);
  }
  25% { transform: scale(1.08) rotate(-2deg); }
  50% {
    filter: drop-shadow(0 0 26px #ff4d6d) drop-shadow(0 0 34px #faedcd);
    transform: scale(1.12) rotate(2deg);
  }
  75% { transform: scale(1.08) rotate(-1deg); }
}

/* Gold premium */
html[data-power-accent="gold"] .power-console-header .power-brand,
html[data-power-accent="gold"] .power-console-header #brand-home,
html.accent-skin-gold .power-console-header .power-brand,
html.accent-skin-gold .power-console-header #brand-home,
body[data-power-accent="gold"] .power-console-header .power-brand,
body[data-power-accent="gold"] .power-console-header #brand-home {
  animation: batteryIdleGold 2.8s infinite ease-in-out !important;
}

html[data-power-accent="gold"] .power-console-header .power-brand.has-notif,
html[data-power-accent="gold"] .power-console-header #brand-home.has-notif,
html[data-power-accent="gold"] .power-console-header .power-brand.has-unread,
html[data-power-accent="gold"] .power-console-header #brand-home.has-unread,
html.accent-skin-gold .power-console-header .power-brand.has-notif,
html.accent-skin-gold .power-console-header #brand-home.has-notif,
body[data-power-accent="gold"] .power-console-header .power-brand.has-notif,
body[data-power-accent="gold"] .power-console-header #brand-home.has-notif {
  animation: batteryAlertGold 0.9s infinite ease-in-out !important;
}

@keyframes batteryIdleGold {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.5));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.95)) drop-shadow(0 0 8px #ffffff);
    transform: scale(1.07);
  }
}

@keyframes batteryAlertGold {
  0%, 100% {
    filter: drop-shadow(0 0 10px #ef4444) drop-shadow(0 0 20px #eab308);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px #f87171) drop-shadow(0 0 36px #facc15) drop-shadow(0 0 12px #ffffff);
    transform: scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] .power-console-header #brand-home,
  html[data-power-accent="gold"] .power-console-header #brand-home,
  html.accent-skin-cafe-con-leche .power-console-header #brand-home,
  html.accent-skin-gold .power-console-header #brand-home,
  html[data-power-accent="cafe-con-leche"] .power-console-header .power-brand,
  html[data-power-accent="gold"] .power-console-header .power-brand,
  body[data-power-accent="cafe-con-leche"] .power-console-header #brand-home,
  body[data-power-accent="gold"] .power-console-header #brand-home {
    animation: none !important;
    transform: none;
  }
}

/* ==========================================================================
   UPGRADE VISUAL DEFINITIVO: CYBER-GLASS HUD & AMBIENT AURA
   ========================================================================== */

:root {
  --power-bg-main: var(--power-bg);
  --power-accent-hover: color-mix(in srgb, var(--power-accent) 78%, #fff);
}

/* 1. Atmósfera y luz ambiental reactiva */
body.power-hud {
  background-color: var(--power-bg-main, var(--power-bg)) !important;
  background-image:
    radial-gradient(circle at 50% -20%, var(--power-accent-soft) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.8) 0%, transparent 40%) !important;
  background-attachment: fixed;
}

/* 2. Emblema cyber-HUD (solo header; no pisa el logo de login) */
.power-console-header #brand-home span,
.power-console-header .power-brand-text,
.power-console-header .power-brand-label {
  display: none !important;
}

.power-console-header #brand-home,
.power-console-header .power-brand {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease !important;
}

.power-console-header .power-brand-icon {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* RONDA 16 — Fallback elegante del logo de cabecera (ruta rota o sin red):
   reemplaza el ícono roto del navegador por una insignia degradada con la
   inicial de marca, del mismo tamaño que .power-brand-icon. */
.power-console-header .power-brand-icon-fallback {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--power-accent), color-mix(in srgb, var(--power-accent) 45%, #7c1aff));
  filter: drop-shadow(0 0 8px var(--power-accent-soft));
  position: relative;
  z-index: 1;
}

/* Anillo en ::after: deja ::before libre (máscara café) y oculta el wordmark POWER */
.power-console-header #brand-home::after,
.power-console-header .power-brand::after {
  content: "" !important;
  position: absolute;
  inset: -3px;
  border-radius: 17px;
  padding: 2px;
  background: linear-gradient(135deg, var(--power-accent), transparent, var(--power-accent));
  -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: 0.6;
  animation: auraRotate 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes auraRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.power-console-header #brand-home:hover,
.power-console-header .power-brand:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 28px var(--power-accent-soft), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

/* 3. Nav desktop: cápsulas de cristal */
@media (min-width: 768px) {
  .power-nav-slot,
  .power-nav-link {
    position: relative;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    font-size: 0.825rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--power-text-muted, var(--power-muted)) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
      color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden;
  }

  .power-nav-slot:hover,
  .power-nav-link:hover {
    color: var(--power-text-main, var(--power-text)) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 0 12px var(--power-accent-soft) !important;
  }

  .power-nav-slot.is-active,
  .power-nav-slot[aria-current="page"],
  .power-nav-slot.active,
  .power-nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--power-accent), var(--power-accent-hover, var(--power-accent))) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px var(--power-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  }
}

/* 4. Tarjetas de métricas */
.power-card,
.rpg-card,
.company-rpg-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(20, 20, 20, 0.6) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.power-card:hover,
.rpg-card:hover,
.company-rpg-card:hover {
  border-color: var(--power-accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px var(--power-accent-soft) !important;
}

/* 5. Números principales */
.power-score,
.power-metric-value {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #ffffff 30%, var(--power-accent) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  filter: drop-shadow(0 0 10px var(--power-accent-soft));
}

@media (prefers-reduced-motion: reduce) {
  .power-console-header #brand-home::after,
  .power-console-header .power-brand::after {
    animation: none !important;
  }
  body.power-hud {
    background-attachment: scroll;
  }
  #hud-notif-center:not(.hidden) .hud-notif-panel,
  #power-notif-panel.open .pn-sheet {
    animation: none !important;
  }
}

/* 5. Drawer de notificaciones estilo HUD flotante
   El glass va en el panel visible; el root sigue inset:0 para clic-fuera
   y para ganar al style.inset='0' que pone power-auth.js. */
#hud-notif-center:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  z-index: 2000 !important;
  display: block !important;
}

#hud-notif-center:not(.hidden) .hud-notif-panel,
#power-notif-panel.open .pn-sheet {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  width: calc(100% - 40px) !important;
  max-width: 400px !important;
  height: auto !important;
  max-height: min(80vh, 36rem) !important;
  background: rgba(15, 15, 18, 0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px var(--power-accent-soft) !important;
  padding: 20px !important;
  z-index: 2000 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  animation: hudSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#power-notif-panel.open {
  z-index: 2000 !important;
}

#power-notif-panel.open .pn-backdrop {
  background: rgba(0, 0, 0, 0.45);
}

@keyframes hudSlideIn {
  from { opacity: 0; transform: translateX(30px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ==========================================================================
   SISTEMA DE NAVEGACIÓN Y FONDOS REACTIVOS POR SKIN (CYBER-GLASS HUD V2)
   ========================================================================== */

/* 1. Header — 64px solo desktop; en PWA el inner hace wrap */
@media (min-width: 768px) {
  .power-header,
  .power-console-header {
    height: 64px !important;
    min-height: 64px !important;
    background: rgba(12, 11, 14, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--power-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  .power-console-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  /* 2. Cápsulas de navegación homogéneas */
  #power-main-nav,
  .power-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 100% !important;
  }

  .power-nav-slot,
  .power-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 0.825rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    color: var(--power-text-muted, var(--power-muted)) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
      color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    position: relative;
  }

  .power-nav-slot:hover,
  .power-nav-link:hover {
    color: var(--power-text-main, var(--power-text)) !important;
    background: var(--power-accent-soft) !important;
    border-color: var(--power-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--power-accent-soft) !important;
  }

  .power-nav-slot.is-active,
  .power-nav-slot[aria-current="page"],
  .power-nav-slot.active,
  .power-nav-link.active {
    color: #ffffff !important;
    background: var(--power-accent) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 20px var(--power-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  }

  .power-nav-slot.is-active::after,
  .power-nav-slot[aria-current="page"]::after,
  .power-nav-slot.active::after,
  .power-nav-link.active::after {
    content: "" !important;
    position: absolute;
    bottom: -2px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: #ffffff !important;
    border-radius: 99px;
    box-shadow: 0 0 8px #ffffff;
  }
}

/* 3. Fondo cyber-grid + aura por skin (html[data-power-accent] es el que setea JS) */
body.power-hud {
  background-color: #0d0c0e !important;
  background-image:
    radial-gradient(circle at 50% -10%, var(--power-accent-soft) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 100% 100%, 32px 32px, 32px 32px !important;
  background-attachment: fixed;
}

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud,
html[data-power-skin="cafe-con-leche"] body.power-hud,
body[data-power-accent="cafe-con-leche"].power-hud {
  background-color: #120e0c !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(212, 163, 115, 0.25) 0%, transparent 65%),
    linear-gradient(rgba(212, 163, 115, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 163, 115, 0.05) 1px, transparent 1px) !important;
  background-size: 100% 100%, 28px 28px, 28px 28px !important;
}

html[data-power-accent="plasma"] body.power-hud,
html.accent-skin-plasma body.power-hud,
body[data-power-accent="plasma"].power-hud {
  background-color: #0f0a14 !important;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(217, 70, 239, 0.28) 0%, transparent 65%),
    linear-gradient(rgba(217, 70, 239, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 70, 239, 0.06) 1px, transparent 1px) !important;
  background-size: 100% 100%, 36px 36px, 36px 36px !important;
}

html[data-power-accent="gold"] body.power-hud,
html.accent-skin-gold body.power-hud,
body[data-power-accent="gold"].power-hud {
  background-color: #12100a !important;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(234, 179, 8, 0.25) 0%, transparent 60%),
    linear-gradient(rgba(234, 179, 8, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 179, 8, 0.05) 1px, transparent 1px) !important;
  background-size: 100% 100%, 30px 30px, 30px 30px !important;
}

/* 4. Micro-interacciones en botones */
/* RONDA 119 · AGENTS §6: solo transform/opacity/filter, curvas oficiales
 * (nunca `ease`), 120 ms de respuesta y compresión a 0.95. El box-shadow
 * ya no se interpola: cambia de golpe y el brillo lo pone `filter`. */
.power-btn,
.pw-btn,
.power-cta {
  transition:
    transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 140ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 140ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.power-btn:active:not(:disabled),
.pw-btn:active:not(:disabled),
.power-cta:active:not(:disabled) {
  transform: scale(0.95) !important;
  transition-duration: 100ms !important;
}

@media (prefers-reduced-motion: reduce) {
  body.power-hud {
    background-attachment: scroll;
  }
  .power-nav-slot:hover,
  .power-nav-link:hover,
  .power-btn:active,
  .pw-btn:active,
  .power-cta:active {
    transform: none !important;
  }
}

/* ==========================================================================
   HEADER UNIFORME Y SELECTOR DE MES COMPACTO
   ========================================================================== */

@media (min-width: 768px) {
  .power-header,
  .power-console-header {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    overflow: visible;
  }

  .power-console-inner {
    height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  #power-main-nav,
  .power-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 100% !important;
  }

  .power-nav-slot,
  .power-nav-link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: var(--power-text-muted, var(--power-muted)) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
      color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .power-nav-slot:hover,
  .power-nav-link:hover {
    color: var(--power-text-main, var(--power-text)) !important;
    background: var(--power-accent-soft) !important;
    border-color: var(--power-accent) !important;
    transform: translateY(-1px);
  }

  .power-nav-slot.is-active,
  .power-nav-slot[aria-current="page"],
  .power-nav-link.is-active,
  .power-nav-slot.active,
  .power-nav-link.active {
    color: #ffffff !important;
    background: var(--power-accent) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 14px var(--power-accent-soft) !important;
  }

  .power-console-header .power-mes-selector,
  .power-header-actions .power-mes-selector,
  .power-month-selector,
  .month-picker-container {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--power-border) !important;
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: var(--power-text-main, var(--power-text)) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  .power-console-header .power-mes-selector button,
  .power-header-actions .power-mes-selector button,
  .power-month-selector button,
  .power-console-header #btn-mes-prev,
  .power-console-header #btn-mes-next {
    height: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    color: var(--power-text-muted, var(--power-muted)) !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
  }

  .power-console-header .power-mes-selector button:hover,
  .power-header-actions .power-mes-selector button:hover,
  .power-month-selector button:hover {
    color: var(--power-text-main, var(--power-text)) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .power-console-header .power-mes-pill,
  .power-header-actions .power-mes-pill,
  .power-console-header #header-mes {
    min-width: 0 !important;
    padding: 0 6px !important;
    font-size: 0.775rem !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
  }
}

/* ==========================================================================
   MODALES Y VENTANAS EMERGENTES CYBER-GLASS HUD
   ========================================================================== */

/* 1. Overlay / backdrop — no es la caja del diálogo */
.power-modal-overlay,
.pw-backdrop,
.pw-overlay:not(.hidden) > .pw-backdrop,
.power-modal-backdrop,
.power-hud [id$="-modal"]:not(.hidden) > .absolute.inset-0,
.power-hud [id$="-modal"]:not(.hidden) > [id$="-backdrop"],
.power-hud [id$="-modal"]:not(.hidden) > [id$="backdrop"] {
  background: rgba(8, 7, 10, 0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 2. Caja del diálogo (clases reales: .pw-panel / .power-modal-dialog) */
.power-modal-card,
.pw-modal-content,
.modal-box,
.power-dialog,
.power-modal-dialog,
.pw-overlay:not(.hidden) > .pw-panel,
.power-hud [id$="-modal"]:not(.hidden) > .pw-panel,
.power-hud [id$="-modal"]:not(.hidden) > .relative:not(.absolute):not(.min-h-full):not(.pw-backdrop) {
  background: linear-gradient(145deg, rgba(22, 20, 26, 0.92) 0%, rgba(12, 11, 15, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid var(--power-accent) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px var(--power-accent-soft) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

/* 3. Encabezados */
.modal-header,
.pw-modal-header,
.power-modal-title,
.power-modal-head,
.pw-panel-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-title,
.power-modal-title h2,
.power-modal-title h3,
.pw-panel-head h3,
.power-modal-head h3 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: var(--power-text-main, var(--power-text)) !important;
}

/* 4. Inputs — no checkbox/radio/hidden */
.power-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.power-modal select,
.power-modal textarea,
.pw-modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.pw-modal-content select,
.pw-modal-content textarea,
.pw-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.pw-overlay select,
.pw-overlay textarea,
[id$="-modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[id$="-modal"] select,
[id$="-modal"] textarea {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  color: var(--power-text-main, var(--power-text)) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.power-modal input:focus,
.power-modal select:focus,
.power-modal textarea:focus,
.pw-overlay input:focus,
.pw-overlay select:focus,
.pw-overlay textarea:focus,
[id$="-modal"] input:focus,
[id$="-modal"] select:focus,
[id$="-modal"] textarea:focus {
  border-color: var(--power-accent) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 12px var(--power-accent-soft), inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 5. Botón cerrar */
.modal-close,
.pw-modal-close,
.btn-close-modal,
.pw-overlay [aria-label="Cerrar"],
.power-modal-root [aria-label="Cerrar"],
[id$="-modal"] [aria-label="Cerrar"] {
  /* R187 · 44 px de área táctil (§6.4): antes 32, y como lleva !important
     ninguna regla local podía corregirlo. */
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--power-text-muted, var(--power-muted)) !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.modal-close:hover,
.pw-modal-close:hover,
.btn-close-modal:hover,
.pw-overlay [aria-label="Cerrar"]:hover,
.power-modal-root [aria-label="Cerrar"]:hover,
[id$="-modal"] [aria-label="Cerrar"]:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   ELIMINACIÓN DE TERCERA FILA Y SELECTOR DE MES COMPACTO
   ========================================================================== */

@media (max-width: 767px) {
  .power-header #header-mes,
  .power-header .power-mes-selector,
  .power-console-header #header-mes,
  .power-console-header .power-mes-selector {
    display: none !important;
  }

  .power-page-head,
  .power-page-head #header-mes,
  .power-page-head .power-mes-selector,
  .power-page .power-mes-selector,
  main .power-mes-selector {
    display: inline-flex !important;
    align-items: center !important;
    margin: 10px 0 !important;
    height: 32px !important;
    padding: 0 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--power-border) !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .power-page-head {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
  }
}

@media (min-width: 768px) {
  .power-console-header #header-mes,
  .power-console-header .power-mes-selector,
  #power-header-actions .power-mes-selector {
    display: inline-flex !important;
    align-items: center !important;
    height: 30px !important;
    padding: 0 6px !important;
    margin: 0 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--power-border) !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }

  .power-console-header #header-mes.power-mes-pill {
    border: none !important;
    background: transparent !important;
    padding: 0 4px !important;
    margin: 0 !important;
    height: auto !important;
  }

  .power-console-header .power-mes-selector button,
  #power-header-actions .power-mes-selector button {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--power-text-muted, var(--power-muted)) !important;
    cursor: pointer !important;
  }

  #power-page-mes-slot {
    display: none !important;
  }
}

/* Reubicación y estabilización del selector de mes en PC */
@media (min-width: 768px) {
  .power-mes-selector,
  .power-console-header #header-mes.power-mes-pill {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 32px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--power-border) !important;
    margin: 0 4px !important;
    flex-shrink: 0 !important;
  }

  .power-console-header #header-mes.power-mes-pill {
    border: none !important;
    background: transparent !important;
    padding: 0 6px !important;
    margin: 0 !important;
  }

  .power-mes-selector button {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--power-text-muted, var(--power-muted)) !important;
    cursor: pointer !important;
  }
}

/* Ícono de notificaciones tipo cyber-radar */
#power-notif-bell,
.power-notif-trigger {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--power-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  color: var(--power-accent) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#power-notif-bell:hover,
.power-notif-trigger:hover {
  background: var(--power-accent-soft) !important;
  border-color: var(--power-accent) !important;
  box-shadow: 0 0 12px var(--power-accent-soft) !important;
}

#power-notif-bell i,
#power-notif-bell svg {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: inherit;
  pointer-events: none;
}

/* ==========================================================================
   FONDOS DINÁMICOS Y ANIMACIONES AMBIENTALES POR SKIN (CYBER-BACKGROUNDS)
   ========================================================================== */

/* Default real: data-power-accent="power" (no "default") */
html:not([data-power-accent]) body.power-hud,
html[data-power-accent="power"] body.power-hud,
html[data-power-accent="default"] body.power-hud,
html.accent-skin-power body.power-hud,
body[data-power-accent="default"].power-hud,
body[data-power-accent="power"].power-hud {
  background-color: #0c0a0e !important;
  /* RONDA 119 · Sin rejilla: obsidiana lisa + un halo carmesí sutil arriba.
   * Antes: dos capas de líneas rojas de 1px a 32px animando background-position
   * (repintado de pantalla completa por fotograma). */
  background-image:
    radial-gradient(120% 70% at 50% -20%, rgba(255, 59, 48, 0.16) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(212, 175, 55, 0.05) 0%, transparent 70%) !important;
  background-size: 100% 100%, 100% 100% !important;
  animation: none !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud,
html[data-power-skin="cafe-con-leche"] body.power-hud,
body[data-power-accent="cafe-con-leche"].power-hud {
  background-color: #14100d !important;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(212, 163, 115, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(250, 237, 205, 0.12) 0%, transparent 50%),
    radial-gradient(rgba(212, 163, 115, 0.1) 1.5px, transparent 1.5px) !important;
  background-size: 100% 100%, 100% 100%, 24px 24px !important;
  animation: bgAtmosphereCafe 12s infinite alternate ease-in-out;
}

@keyframes bgAtmosphereCafe {
  0% { background-position: 0% 0%, 0% 0%, 0 0; }
  100% { background-position: 10% 15%, -10% -15%, 12px 12px; }
}

html[data-power-accent="plasma"] body.power-hud,
html.accent-skin-plasma body.power-hud,
body[data-power-accent="plasma"].power-hud {
  background-color: #0e0714 !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(217, 70, 239, 0.3) 0%, transparent 60%),
    linear-gradient(135deg, rgba(217, 70, 239, 0.08) 25%, transparent 25%),
    linear-gradient(225deg, rgba(217, 70, 239, 0.08) 25%, transparent 25%) !important;
  background-size: 100% 100%, 40px 40px, 40px 40px !important;
  animation: bgPlasmaWave 6s linear infinite;
}

@keyframes bgPlasmaWave {
  0% { background-position: 0% 0%, 0 0, 0 0; }
  100% { background-position: 0% 0%, 40px 0, -40px 0; }
}

html[data-power-accent="gold"] body.power-hud,
html.accent-skin-gold body.power-hud,
body[data-power-accent="gold"].power-hud {
  background-color: #120f09 !important;
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(234, 179, 8, 0.28) 0%, transparent 55%),
    linear-gradient(45deg, rgba(234, 179, 8, 0.06) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(234, 179, 8, 0.06) 1px, transparent 1px) !important;
  background-size: 100% 100%, 28px 28px, 28px 28px !important;
  animation: bgGoldShimmerPos 10s infinite ease-in-out;
}

@keyframes bgGoldShimmerPos {
  0%, 100% { background-position: 0% 0%, 0 0, 0 0; }
  50% { background-position: 0% 8%, 14px 14px, -14px 14px; }
}

html[data-power-accent="gold"] body.power-hud::after,
html.accent-skin-gold body.power-hud::after {
  animation: bgGoldShimmer 10s infinite ease-in-out;
}

@keyframes bgGoldShimmer {
  0%, 100% { filter: contrast(100%) brightness(1); }
  50% { filter: contrast(110%) brightness(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-power-accent]) body.power-hud,
  html[data-power-accent="power"] body.power-hud,
  html[data-power-accent="cafe-con-leche"] body.power-hud,
  html[data-power-accent="plasma"] body.power-hud,
  html[data-power-accent="gold"] body.power-hud,
  html.accent-skin-power body.power-hud,
  html.accent-skin-cafe-con-leche body.power-hud,
  html.accent-skin-plasma body.power-hud,
  html.accent-skin-gold body.power-hud,
  html[data-power-accent="gold"] body.power-hud::after,
  html.accent-skin-gold body.power-hud::after {
    animation: none !important;
  }
}

/* ==========================================================================
   SECCIONES DE AGENDA Y CURSOS CYBER-GLASS HUD
   ========================================================================== */

/* 1. Retícula de cards — no #cal-grid (calendario es 7 columnas) */
.agenda-grid,
.power-schedule-grid,
.agenda-container,
.cursos-card-grid,
.cursos-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 18px !important;
  padding: 16px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#cursos-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 2. Tarjetas de curso (padding lo pone .curso-card-body) */
.curso-card,
.agenda-card,
.agenda-item,
.slot-card,
.rpg-curso-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(18, 16, 22, 0.7) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative;
  overflow: hidden;
}

.curso-card:hover,
.agenda-card:hover,
.agenda-item:hover,
.slot-card:hover {
  border-color: var(--power-accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px var(--power-accent-soft) !important;
}

/* Celdas de calendario: cristal, sin padding 20px (son h-28) */
#cal-grid > div {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(18, 16, 22, 0.7) 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#cal-grid > div:hover {
  border-color: var(--power-accent) !important;
  box-shadow: 0 0 16px var(--power-accent-soft);
}

/* 3. Títulos */
.curso-card h3,
.agenda-card h3,
.curso-title,
.agenda-title,
.curso-card-name {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--power-text-main, var(--power-text)) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

/* 4. Insignias horario / sector */
.agenda-time,
.curso-badge,
.slot-time,
.badge-horario,
.curso-sector-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  background: var(--power-accent-soft) !important;
  color: var(--power-accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: fit-content !important;
}

.curso-sector-badge {
  margin-bottom: 0 !important;
}

/* 5. Cabeceras de día */
.agenda-day-header,
.schedule-day-title,
.curso-sector-head,
.curso-sector-title {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.curso-sector-title,
.agenda-day-header,
.schedule-day-title {
  font-size: 1rem !important;
  color: var(--power-accent) !important;
}

.curso-sector-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--power-border) !important;
  margin-bottom: 14px !important;
}

/* ==========================================================================
   ENCABEZADOS DE PÁGINA Y SELECTOR DE MES INTEGRADO (NATIVO FLEX)
   ========================================================================== */

.power-header #header-mes,
.power-console-header #header-mes,
.power-console-header .power-mes-selector,
#power-header-actions .power-mes-selector,
#power-page-mes-slot {
  display: none !important;
}

.power-page-head,
.power-section-head,
.company-sheet-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 0 20px 0 !important;
  border-bottom: 1px solid var(--power-border) !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.power-page-title-group,
.power-head-titles,
.power-section-head > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0;
  flex: 1 1 auto;
}

.power-page-title-group h1,
.power-page-title-group h2,
.power-head-titles h1,
.power-head-titles h2,
.power-section-head > div:first-child h2 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: var(--power-text-main, var(--power-text)) !important;
}

.power-page-subtitle,
.power-head-sub,
.power-section-head .sub,
.power-section-head #dashboard-subtitulo,
.power-section-head #subtitulo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.875rem !important;
  color: var(--power-text-muted, var(--power-muted)) !important;
}

.power-section-head .power-mes-selector,
.power-page-head .power-mes-selector,
.company-sheet-head .power-mes-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 10px !important;
  margin-top: 6px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  color: var(--power-text-main, var(--power-text)) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  flex-shrink: 0 !important;
}

.power-section-head .power-mes-selector:hover {
  border-color: var(--power-accent) !important;
  background: var(--power-accent-soft) !important;
  box-shadow: 0 0 14px var(--power-accent-soft) !important;
}

.power-section-head .power-mes-selector button {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  color: var(--power-text-muted, var(--power-muted)) !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}

.power-section-head .power-mes-selector button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.power-section-head .power-mes-pill,
.power-section-head #header-mes {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 4px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: inherit !important;
}

.power-head-actions,
.power-page-actions,
.power-section-head .dash-action-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* ==========================================================================
   PERFECCIONAMIENTO ESTÉTICO DEL DASHBOARD Y BARRA DE ACCIONES (AAA)
   ========================================================================== */

.power-section-head,
.power-page-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 24px !important;
}

.power-head-titles,
.power-section-head > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  min-width: 0;
  flex: 1 1 auto;
}

.power-section-head > div:first-child > .power-label,
.power-section-head > div:first-child > h2,
.power-section-head > div:first-child > #dashboard-error,
.power-section-head > div:first-child > #error {
  flex: 1 0 100%;
}

.power-section-head > div:first-child > .sub,
.power-section-head > div:first-child > .power-mes-selector {
  flex: 0 0 auto;
}

.power-section-head .power-mes-selector,
.power-page-head .power-mes-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 28px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--power-accent-soft) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--power-text-main, var(--power-text)) !important;
  vertical-align: middle !important;
}

.dash-action-bar,
.power-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dash-action-bar .power-nav-slot,
.dash-action-bar button:not(.power-cta),
.power-head-actions button:not(.power-cta) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 0.825rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--power-text-main, var(--power-text)) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  transition:
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dash-action-bar .power-nav-slot:hover,
.dash-action-bar button:hover:not(.power-cta),
.power-head-actions button:hover:not(.power-cta) {
  border-color: var(--power-accent) !important;
  background: var(--power-accent-soft) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--power-accent-soft) !important;
}

.dash-action-bar .power-cta,
.power-hud a.power-cta[data-power-nav-cta="registrar"] {
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, var(--power-accent), var(--power-accent-hover, var(--power-accent))) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 20px var(--power-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-power-accent="gold"] .dash-action-bar .power-cta,
html.accent-skin-gold .dash-action-bar .power-cta,
html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta,
html.accent-skin-cafe-con-leche .dash-action-bar .power-cta {
  color: #1a1408 !important;
}

.dash-action-bar .power-cta:hover,
.power-hud a.power-cta[data-power-nav-cta="registrar"]:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px var(--power-accent-soft) !important;
  filter: brightness(1.1);
}

@media (min-width: 768px) {
  .power-nav-slot,
  .power-nav-link {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 0.825rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  .power-nav-slot.is-active,
  .power-nav-slot[aria-current="page"],
  .power-nav-link.is-active,
  .power-nav-slot.active,
  .power-nav-link.active {
    background: linear-gradient(135deg, var(--power-accent), var(--power-accent-soft)) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px var(--power-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
  }
}

/* ==========================================================================
   OPTIMIZACIÓN PWA MÓVIL: SUBTÍTULO DINÁMICO Y ACCIONES EN ANCHO COMPLETO
   ========================================================================== */

/* Duplica el mes de la cápsula ("Resumen de julio 2026") */
.power-section-head .power-head-sub-text,
.power-page-head .power-head-sub-text,
#dash-sub-text,
#dashboard-subtitulo {
  display: none !important;
}

@media (max-width: 767px) {
  .power-section-head,
  .power-page-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 0 16px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .power-head-titles,
  .power-section-head > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .power-section-head > div:first-child > .power-label {
    flex: 1 0 100%;
  }

  .power-head-titles h1,
  .power-head-titles h2,
  .power-section-head > div:first-child > h2 {
    flex: 1 1 auto;
    font-size: 1.4rem !important;
    margin: 0 !important;
    min-width: 0;
  }

  .power-section-head .power-mes-selector,
  .power-page-head .power-mes-selector {
    display: inline-flex !important;
    height: 32px !important;
    padding: 0 10px !important;
    margin: 0 0 0 auto !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--power-accent) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    box-shadow: 0 0 12px var(--power-accent-soft) !important;
    flex: 0 0 auto !important;
  }

  .dash-action-bar,
  .power-head-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 2fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .dash-action-bar > *,
  .power-head-actions > * {
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 8px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .dash-action-bar .power-cta {
    font-size: 0.8rem !important;
    padding: 0 8px !important;
  }
}

/* ==========================================================================
   REFINACIÓN TIPOGRÁFICA Y REESTRUCTURACIÓN ELEGANTE (DARK MINIMALIST AAA)
   ========================================================================== */

body.power-hud,
.power-hud button,
.power-hud input,
.power-hud select {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em;
}

#dashboard-subtitulo,
.power-head-sub-text,
.power-page-subtitle {
  display: none !important;
}

.power-section-head,
.power-page-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 0 16px 0 !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.power-head-titles,
.power-section-head > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.power-head-titles h1,
.power-head-titles h2,
.power-section-head > div:first-child > h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--power-text-main, var(--power-text)) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
  flex: 0 1 auto;
}

.power-section-head .power-mes-selector,
.power-page-head .power-mes-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  color: var(--power-text-main, var(--power-text)) !important;
  margin: 0 !important;
}

.power-section-head .power-mes-selector #header-mes,
.power-section-head .power-mes-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 2px !important;
  margin: 0 !important;
}

.power-section-head .power-mes-selector button {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--power-text-muted, var(--power-muted)) !important;
  cursor: pointer !important;
}

.dash-action-bar,
.power-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dash-action-bar .power-nav-slot,
.dash-action-bar button:not(.power-cta),
.power-head-actions button:not(.power-cta) {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--power-text-muted, var(--power-muted)) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer !important;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

.dash-action-bar .power-nav-slot:hover,
.dash-action-bar button:hover:not(.power-cta),
.power-head-actions button:hover:not(.power-cta) {
  color: var(--power-text-main, var(--power-text)) !important;
  border-color: var(--power-accent) !important;
  background: var(--power-accent-soft) !important;
}

.dash-action-bar .power-cta,
.dash-action-bar a.power-cta {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: var(--power-accent) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 10px var(--power-accent-soft) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: filter 0.2s ease, transform 0.2s ease !important;
}

html[data-power-accent="gold"] .dash-action-bar .power-cta,
html.accent-skin-gold .dash-action-bar .power-cta,
html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta,
html.accent-skin-cafe-con-leche .dash-action-bar .power-cta {
  color: #1a1408 !important;
}

.dash-action-bar .power-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .dash-action-bar,
  .power-head-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.5fr !important;
  }

  .dash-action-bar > *,
  .power-head-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
  }
}

/* ==========================================================================
   NAVEGACIÓN DESKTOP PREMIUM Y ELEVACIÓN DE BOTONES (CYBER-GLASS AAA)
   ========================================================================== */

@media (min-width: 768px) {
  header #power-main-nav,
  header .power-nav {
    gap: 6px !important;
  }

  header #power-main-nav .power-nav-slot,
  header .power-nav .power-nav-link {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--power-text-muted, var(--power-muted)) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition:
      color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  header #power-main-nav .power-nav-slot:hover {
    color: var(--power-text-main, var(--power-text)) !important;
    background: var(--power-accent-soft) !important;
    border-color: var(--power-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--power-accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }

  header #power-main-nav .power-nav-slot.is-active,
  header #power-main-nav .power-nav-slot[aria-current="page"],
  header #power-main-nav .power-nav-slot.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--power-accent), var(--power-accent-hover, var(--power-accent))) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 20px var(--power-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  }
}

.power-page-subtitle,
.page-subtitle,
.power-head-sub,
.power-section-head > div:first-child > .sub,
#subtitulo {
  display: none !important;
}

.power-section-head .power-mes-selector,
.power-page-head .power-mes-selector,
.mes-picker-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--power-accent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--power-text-main, var(--power-text)) !important;
  box-shadow: 0 0 12px var(--power-accent-soft) !important;
}

.btn-confirmar-pago,
.btn-aplicar-minimo,
.btn-reward {
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-confirmar-pago:hover,
.btn-aplicar-minimo:hover,
.btn-reward:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.1);
}

/* ==========================================================================
   CORRECCIÓN DEFINITIVA DE ENCABEZADOS Y SELECTOR DE MES (CYBER-GLASS AAA)
   ========================================================================== */

.power-section-head #dashboard-subtitulo,
.power-section-head #dash-sub-text,
.power-section-head > div:first-child > .sub,
.power-section-head > div:first-child > .power-label,
.power-head-titles > p:not(#dashboard-error):not(#error),
#dashboard-subtitulo,
#dash-sub-text,
#subtitulo {
  display: none !important;
}

.power-section-head #dashboard-error,
.power-section-head #error {
  display: block !important;
  flex: 1 0 100%;
}

@media (min-width: 768px) {
  .power-section-head,
  .power-page-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 16px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    width: 100% !important;
  }

  .power-head-titles,
  .power-section-head > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  .power-head-titles h1,
  .power-head-titles h2,
  .power-section-head > div:first-child > h2 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--power-text-main, var(--power-text)) !important;
    margin: 0 !important;
  }

  .power-section-head .power-mes-selector,
  .power-page-head .power-mes-selector {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: var(--power-text-main, var(--power-text)) !important;
    margin: 0 !important;
  }

  .dash-action-bar,
  .power-head-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 767px) {
  .power-section-head,
  .power-page-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 10px 0 14px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .power-head-titles,
  .power-section-head > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .power-head-titles h1,
  .power-head-titles h2,
  .power-section-head > div:first-child > h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  .power-section-head .power-mes-selector {
    display: inline-flex !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--power-accent) !important;
    margin-left: auto !important;
  }

  .dash-action-bar,
  .power-head-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.4fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .dash-action-bar button,
  .dash-action-bar a.power-cta,
  .power-head-actions button {
    height: 36px !important;
    padding: 0 6px !important;
    font-size: 0.725rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

.dash-action-bar button:not(.power-cta),
.dash-action-bar .power-nav-slot,
.power-head-actions button:not(.power-cta) {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--power-text-muted, var(--power-muted)) !important;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

.dash-action-bar button:hover:not(.power-cta),
.dash-action-bar .power-nav-slot:hover,
.power-head-actions button:hover:not(.power-cta) {
  color: var(--power-text-main, var(--power-text)) !important;
  border-color: var(--power-accent) !important;
  background: var(--power-accent-soft) !important;
}

.dash-action-bar .power-cta,
.dash-action-bar a.power-cta {
  background: var(--power-accent) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 10px var(--power-accent-soft) !important;
}

html[data-power-accent="gold"] .dash-action-bar .power-cta,
html.accent-skin-gold .dash-action-bar .power-cta,
html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta,
html.accent-skin-cafe-con-leche .dash-action-bar .power-cta {
  color: #1a1408 !important;
}

/* ==========================================================================
   FONDOS Y CUADRÍCULAS ANIMADAS Y TEMÁTICAS POR SKIN (CYBER-BACKGROUNDS V3)
   ========================================================================== */

body.power-hud {
  position: relative;
  background-color: var(--power-bg-main, var(--power-bg));
  overflow-x: hidden !important;
}

body.power-hud::before,
body.power-hud::after {
  content: "";
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0;
  transform: translateZ(0);
}

html:not([data-power-accent]) body.power-hud,
html[data-power-accent="power"] body.power-hud,
html.accent-skin-power body.power-hud {
  --power-bg-main: #0b090c;
}

html:not([data-power-accent]) body.power-hud::after,
html[data-power-accent="power"] body.power-hud::after,
html.accent-skin-power body.power-hud::after {
  background: radial-gradient(circle at 50% 30%, rgba(255, 59, 48, 0.22) 0%, transparent 70%) !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud {
  --power-bg-main: #120e0b;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(rgba(212, 163, 115, 0.15) 1.5px, transparent 1.5px),
    radial-gradient(rgba(250, 237, 205, 0.08) 1px, transparent 1px) !important;
  background-size: 24px 24px, 48px 48px !important;
  background-position: 0 0, 12px 12px !important;
  animation: atmosphereCafe 12s infinite linear;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(212, 163, 115, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(212, 163, 115, 0.12) 0%, transparent 50%) !important;
}

@keyframes atmosphereCafe {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

html[data-power-accent="plasma"] body.power-hud,
html.accent-skin-plasma body.power-hud {
  --power-bg-main: #0c0612;
}

html[data-power-accent="plasma"] body.power-hud::before,
html.accent-skin-plasma body.power-hud::before {
  background-image:
    linear-gradient(135deg, rgba(217, 70, 239, 0.1) 25%, transparent 25%),
    linear-gradient(225deg, rgba(217, 70, 239, 0.1) 25%, transparent 25%),
    linear-gradient(45deg, rgba(217, 70, 239, 0.1) 25%, transparent 25%),
    linear-gradient(315deg, rgba(217, 70, 239, 0.1) 25%, transparent 25%) !important;
  background-size: 40px 40px !important;
  animation: plasmaWave 8s infinite linear;
}

html[data-power-accent="plasma"] body.power-hud::after,
html.accent-skin-plasma body.power-hud::after {
  background: radial-gradient(circle at 50% -10%, rgba(217, 70, 239, 0.28) 0%, transparent 65%) !important;
}

@keyframes plasmaWave {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 40px 40px, -40px 40px, 40px -40px, -40px -40px; }
}

html[data-power-accent="gold"] body.power-hud,
html.accent-skin-gold body.power-hud {
  --power-bg-main: #110e08;
}

html[data-power-accent="gold"] body.power-hud::before,
html.accent-skin-gold body.power-hud::before {
  background-image:
    linear-gradient(45deg, rgba(234, 179, 8, 0.09) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(234, 179, 8, 0.09) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  animation: goldShimmer 10s infinite ease-in-out;
}

html[data-power-accent="gold"] body.power-hud::after,
html.accent-skin-gold body.power-hud::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(234, 179, 8, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(250, 204, 21, 0.1) 0%, transparent 40%) !important;
}

@keyframes goldShimmer {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

html[data-power-accent="violet"] body.power-hud,
html.accent-skin-violet body.power-hud {
  --power-bg-main: #090712;
}

html[data-power-accent="violet"] body.power-hud::before,
html.accent-skin-violet body.power-hud::before {
  background-image:
    radial-gradient(rgba(168, 85, 247, 0.18) 1px, transparent 1px),
    linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px) !important;
  background-size: 36px 36px, 36px 36px !important;
  animation: violetStarfield 14s infinite linear;
}

html[data-power-accent="violet"] body.power-hud::after,
html.accent-skin-violet body.power-hud::after {
  background: radial-gradient(circle at 50% 20%, rgba(168, 85, 247, 0.22) 0%, transparent 65%) !important;
}

@keyframes violetStarfield {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 36px 18px, 0 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="power"] body.power-hud::before,
  html:not([data-power-accent]) body.power-hud::before,
  html.accent-skin-power body.power-hud::before,
  html[data-power-accent="cafe-con-leche"] body.power-hud::before,
  html.accent-skin-cafe-con-leche body.power-hud::before,
  html[data-power-accent="plasma"] body.power-hud::before,
  html.accent-skin-plasma body.power-hud::before,
  html[data-power-accent="gold"] body.power-hud::before,
  html.accent-skin-gold body.power-hud::before,
  html[data-power-accent="violet"] body.power-hud::before,
  html.accent-skin-violet body.power-hud::before {
    animation: none !important;
    transform: none;
  }
}

/* ==========================================================================
   ARQUITECTURA VISUAL CINEMÁTICA Y RESTRUCTURACIÓN AAA (v3.0)
   ========================================================================== */

body.power-hud {
  position: relative;
  background-color: var(--power-bg-main, #0b090c) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em;
  overflow-x: hidden !important;
}

body.power-hud::before,
body.power-hud::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
}

main,
.power-page,
.power-hud-content,
.power-card,
.pw-panel {
  position: relative;
  z-index: 1;
}

html:not([data-power-accent]) body.power-hud,
html[data-power-accent="power"] body.power-hud,
html.accent-skin-power body.power-hud {
  --power-accent: #ff3b30;
  --power-accent-soft: rgba(255, 59, 48, 0.2);
  --power-bg-main: #0b090c;
  --power-bg-card: rgba(22, 18, 24, 0.85);
  --power-border: rgba(255, 59, 48, 0.25);
}

html:not([data-power-accent]) body.power-hud::after,
html[data-power-accent="power"] body.power-hud::after,
html.accent-skin-power body.power-hud::after {
  background: radial-gradient(circle at 50% 30%, rgba(255, 59, 48, 0.22) 0%, transparent 70%) !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud {
  --power-accent: #d4a373;
  --power-accent-soft: rgba(212, 163, 115, 0.2);
  --power-bg-main: #120e0b;
  --power-bg-card: rgba(26, 21, 17, 0.88);
  --power-border: rgba(212, 163, 115, 0.3);
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(rgba(212, 163, 115, 0.18) 1.5px, transparent 1.5px),
    radial-gradient(rgba(250, 237, 205, 0.08) 1px, transparent 1px) !important;
  background-size: 24px 24px, 48px 48px !important;
  animation: atmosphereCafe 12s infinite ease-in-out !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(212, 163, 115, 0.2) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(250, 237, 205, 0.12) 0%, transparent 50%) !important;
}

@keyframes atmosphereCafe {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-8px); opacity: 1; }
}

html[data-power-accent="plasma"] body.power-hud,
html.accent-skin-plasma body.power-hud {
  --power-accent: #d946ef;
  --power-accent-soft: rgba(217, 70, 239, 0.22);
  --power-bg-main: #0c0612;
  --power-bg-card: rgba(22, 12, 32, 0.85);
  --power-border: rgba(217, 70, 239, 0.3);
}

html[data-power-accent="plasma"] body.power-hud::before,
html.accent-skin-plasma body.power-hud::before {
  background-image:
    linear-gradient(135deg, rgba(217, 70, 239, 0.12) 25%, transparent 25%),
    linear-gradient(225deg, rgba(217, 70, 239, 0.12) 25%, transparent 25%),
    linear-gradient(45deg, rgba(217, 70, 239, 0.12) 25%, transparent 25%),
    linear-gradient(315deg, rgba(217, 70, 239, 0.12) 25%, transparent 25%) !important;
  background-size: 40px 40px !important;
  animation: plasmaWave 8s infinite linear !important;
}

html[data-power-accent="plasma"] body.power-hud::after,
html.accent-skin-plasma body.power-hud::after {
  background: radial-gradient(circle at 50% -10%, rgba(217, 70, 239, 0.3) 0%, transparent 65%) !important;
}

@keyframes plasmaWave {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 40px 40px, -40px 40px, 40px -40px, -40px -40px; }
}

html[data-power-accent="gold"] body.power-hud,
html.accent-skin-gold body.power-hud {
  --power-accent: #eab308;
  --power-accent-soft: rgba(234, 179, 8, 0.22);
  --power-bg-main: #110e08;
  --power-bg-card: rgba(26, 22, 14, 0.88);
  --power-border: rgba(234, 179, 8, 0.32);
}

html[data-power-accent="gold"] body.power-hud::before,
html.accent-skin-gold body.power-hud::before {
  background-image:
    linear-gradient(45deg, rgba(234, 179, 8, 0.1) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(234, 179, 8, 0.1) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  animation: goldShimmer 10s infinite ease-in-out !important;
}

html[data-power-accent="gold"] body.power-hud::after,
html.accent-skin-gold body.power-hud::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(234, 179, 8, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(250, 204, 21, 0.12) 0%, transparent 40%) !important;
}

@keyframes goldShimmer {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

html[data-power-accent="violet"] body.power-hud,
html.accent-skin-violet body.power-hud {
  --power-accent: #a855f7;
  --power-accent-soft: rgba(168, 85, 247, 0.22);
  --power-bg-main: #090712;
  --power-bg-card: rgba(18, 14, 30, 0.85);
  --power-border: rgba(168, 85, 247, 0.3);
}

html[data-power-accent="violet"] body.power-hud::before,
html.accent-skin-violet body.power-hud::before {
  background-image:
    radial-gradient(rgba(168, 85, 247, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px) !important;
  background-size: 36px 36px, 36px 36px !important;
  animation: cosmicDrift 14s infinite alternate ease-in-out !important;
}

html[data-power-accent="violet"] body.power-hud::after,
html.accent-skin-violet body.power-hud::after {
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.25) 0%, transparent 70%) !important;
}

@keyframes cosmicDrift {
  0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

html[data-power-accent="coral"] body.power-hud,
html.accent-skin-coral body.power-hud {
  --power-accent: #ff6b6b;
  --power-accent-soft: rgba(255, 107, 107, 0.22);
  --power-bg-main: #140907;
  --power-bg-card: rgba(28, 16, 14, 0.88);
  --power-border: rgba(255, 107, 107, 0.3);
}

html[data-power-accent="coral"] body.power-hud::before,
html.accent-skin-coral body.power-hud::before {
  background-image:
    linear-gradient(30deg, rgba(255, 107, 107, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(255, 107, 107, 0.1) 87.5%, rgba(255, 107, 107, 0.1)),
    linear-gradient(150deg, rgba(255, 107, 107, 0.1) 12%, transparent 12.5%, transparent 87%, rgba(255, 107, 107, 0.1) 87.5%, rgba(255, 107, 107, 0.1)) !important;
  background-size: 30px 52px !important;
  animation: solarFlare 7s infinite ease-in-out !important;
}

html[data-power-accent="coral"] body.power-hud::after,
html.accent-skin-coral body.power-hud::after {
  background: radial-gradient(circle at 50% 20%, rgba(255, 107, 107, 0.26) 0%, transparent 65%) !important;
}

@keyframes solarFlare {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 0.95; }
}

.power-console-header #brand-home span,
.power-console-header .power-brand-text,
.power-console-header .power-brand-label {
  display: none !important;
}

.power-console-header #brand-home,
.power-console-header .power-brand {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--power-border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

.power-console-header #brand-home:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 28px var(--power-accent-soft), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

.power-console-header #brand-home::after,
.power-console-header .power-brand::after {
  content: "" !important;
  position: absolute;
  inset: -3px;
  border-radius: 17px;
  padding: 2px;
  background: linear-gradient(135deg, var(--power-accent), transparent, var(--power-accent));
  -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: 0.7;
  animation: batteryRingRotate 6s linear infinite;
  pointer-events: none;
}

@keyframes batteryRingRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.power-console-header .power-brand.has-notif,
.power-console-header #brand-home.has-notif {
  animation: batteryAlertPulse 1.2s infinite ease-in-out !important;
}

@keyframes batteryAlertPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px #ff3b30) drop-shadow(0 0 20px var(--power-accent)) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 24px #ff3b30) drop-shadow(0 0 32px var(--power-accent)) brightness(1.35);
    transform: scale(1.08);
  }
}

@media (min-width: 768px) {
  .power-header,
  .power-console-header {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    background: rgba(12, 10, 14, 0.82) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--power-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  .power-console-inner {
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    gap: 16px !important;
  }

  header #power-main-nav .power-nav-slot {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: var(--power-text-muted, #94a3b8) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  header #power-main-nav .power-nav-slot:hover {
    color: #ffffff !important;
    background: var(--power-accent-soft) !important;
    border-color: var(--power-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--power-accent-soft) !important;
  }

  header #power-main-nav .power-nav-slot.is-active,
  header #power-main-nav .power-nav-slot[aria-current="page"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--power-accent), var(--power-accent-soft)) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 20px var(--power-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    position: relative;
  }

  header #power-main-nav .power-nav-slot.is-active::after,
  header #power-main-nav .power-nav-slot[aria-current="page"]::after {
    content: "" !important;
    position: absolute;
    bottom: -2px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: #ffffff !important;
    border-radius: 99px;
    box-shadow: 0 0 8px #ffffff;
  }
}

.power-section-head #dashboard-subtitulo,
.power-section-head #dash-sub-text,
.power-section-head > div:first-child > .sub,
.power-section-head > div:first-child > .power-label,
#dashboard-subtitulo,
#dash-sub-text,
#subtitulo {
  display: none !important;
}

.power-section-head #dashboard-error,
.power-section-head #error {
  display: block !important;
}

.power-section-head,
.power-page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 0 16px 0 !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.power-section-head > div:first-child,
.power-head-titles {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.power-section-head h2,
.power-head-titles h1,
.power-head-titles h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.power-section-head .power-mes-selector,
.power-page-head .power-mes-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--power-accent) !important;
  backdrop-filter: blur(10px);
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px var(--power-accent-soft) !important;
}

.dash-action-bar,
.power-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dash-action-bar button:not(.power-cta),
.dash-action-bar .power-nav-slot,
.power-head-actions button:not(.power-cta) {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--power-text-muted, #94a3b8) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
}

.dash-action-bar .power-cta {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: var(--power-accent) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px var(--power-accent-soft) !important;
}

@media (max-width: 767px) {
  .power-section-head,
  .power-page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .power-section-head > div:first-child,
  .power-head-titles {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .dash-action-bar,
  .power-head-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.4fr !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .dash-action-bar button,
  .power-head-actions button,
  .dash-action-bar .power-cta {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.power-hud::before,
  body.power-hud::after,
  .power-console-header #brand-home::after,
  .power-console-header .power-brand::after,
  .power-console-header #brand-home.has-notif {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   TRANSFORMACIÓN VISUAL HIGH IMPACT: TEXTURAS VIVAS Y CRISTAL TRASLÚCIDO (v4.0)
   ========================================================================== */

.power-card,
.rpg-card,
.company-rpg-card,
.curso-card,
.pw-panel {
  background: rgba(12, 10, 16, 0.45) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid var(--power-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

html[data-power-accent="power"] body.power-hud,
html:not([data-power-accent]) body.power-hud,
html.accent-skin-power body.power-hud {
  --power-accent: #ff3b30;
  --power-accent-soft: rgba(255, 59, 48, 0.25);
  --power-bg-main: #080608;
  --power-border: rgba(255, 59, 48, 0.4);
}

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud {
  --power-accent: #d4a373;
  --power-accent-soft: rgba(212, 163, 115, 0.25);
  --power-bg-main: #100b08;
  --power-border: rgba(212, 163, 115, 0.4);
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212, 163, 115, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(250, 237, 205, 0.25) 0%, transparent 45%),
    radial-gradient(rgba(212, 163, 115, 0.3) 2px, transparent 2px) !important;
  background-size: 100% 100%, 100% 100%, 28px 28px !important;
  animation: bokehFloat 10s ease-in-out infinite alternate !important;
}

@keyframes bokehFloat {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-15px, 10px); }
}

html[data-power-accent="plasma"] body.power-hud,
html.accent-skin-plasma body.power-hud {
  --power-accent: #d946ef;
  --power-accent-soft: rgba(217, 70, 239, 0.3);
  --power-bg-main: #0a0410;
  --power-border: rgba(217, 70, 239, 0.45);
}

html[data-power-accent="plasma"] body.power-hud::before,
html.accent-skin-plasma body.power-hud::before {
  background-image:
    repeating-linear-gradient(45deg, rgba(217, 70, 239, 0.15) 0px, rgba(217, 70, 239, 0.15) 2px, transparent 2px, transparent 20px),
    repeating-linear-gradient(-45deg, rgba(168, 85, 247, 0.15) 0px, rgba(168, 85, 247, 0.15) 2px, transparent 2px, transparent 20px) !important;
  background-size: 40px 40px !important;
  animation: plasmaBeam 5s linear infinite !important;
}

@keyframes plasmaBeam {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 40px 0, -40px 0; }
}

html[data-power-accent="gold"] body.power-hud,
html.accent-skin-gold body.power-hud {
  --power-accent: #eab308;
  --power-accent-soft: rgba(234, 179, 8, 0.3);
  --power-bg-main: #0e0b06;
  --power-border: rgba(234, 179, 8, 0.45);
}

html[data-power-accent="gold"] body.power-hud::before,
html.accent-skin-gold body.power-hud::before {
  background-image:
    linear-gradient(115deg, transparent 20%, rgba(250, 204, 21, 0.25) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(250, 204, 21, 0.25) 55%, transparent 80%),
    linear-gradient(45deg, rgba(234, 179, 8, 0.12) 1px, transparent 1px) !important;
  background-size: 200% 200%, 24px 24px !important;
  animation: goldRay 7s ease-in-out infinite !important;
}

@keyframes goldRay {
  0% { background-position: -100% -100%, 0 0; }
  100% { background-position: 200% 200%, 0 0; }
}

html[data-power-accent="violet"] body.power-hud,
html.accent-skin-violet body.power-hud {
  --power-accent: #a855f7;
  --power-accent-soft: rgba(168, 85, 247, 0.3);
  --power-bg-main: #07050e;
  --power-border: rgba(168, 85, 247, 0.4);
}

html[data-power-accent="violet"] body.power-hud::before,
html.accent-skin-violet body.power-hud::before {
  background-image:
    radial-gradient(rgba(168, 85, 247, 0.4) 1.5px, transparent 1.5px),
    radial-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px) !important;
  background-size: 32px 32px, 64px 64px !important;
  background-position: 0 0, 16px 16px !important;
  animation: cosmicStarDrift 12s linear infinite !important;
}

@keyframes cosmicStarDrift {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

html[data-power-accent="violet"] body.power-hud::after,
html.accent-skin-violet body.power-hud::after {
  background: radial-gradient(circle at 40% 30%, rgba(168, 85, 247, 0.28) 0%, transparent 62%) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="power"] body.power-hud::before,
  html:not([data-power-accent]) body.power-hud::before,
  html.accent-skin-power body.power-hud::before,
  html[data-power-accent="cafe-con-leche"] body.power-hud::before,
  html.accent-skin-cafe-con-leche body.power-hud::before,
  html[data-power-accent="plasma"] body.power-hud::before,
  html.accent-skin-plasma body.power-hud::before,
  html[data-power-accent="gold"] body.power-hud::before,
  html.accent-skin-gold body.power-hud::before,
  html[data-power-accent="violet"] body.power-hud::before,
  html.accent-skin-violet body.power-hud::before {
    animation: none !important;
    transform: none !important;
  }
}

.power-card:hover,
.rpg-card:hover,
.curso-card:hover,
.company-rpg-card:hover {
  border-color: var(--power-accent) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px var(--power-accent-soft) !important;
  transform: translateY(-3px) !important;
}

/* ==========================================================================
   SECCIÓN DE ALUMNOS Y FICHERO CYBER-GLASS HUD (AAA)
   ========================================================================== */

.power-search-container,
.alumnos-filter-bar,
.search-box-group,
.power-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

/* RONDA 15: eliminado el @media (max-width:639px){flex-direction:column}
   que quebraba buscador+botón en dos pisos en móvil (efecto pirámide) — la
   fila horizontal ahora se mantiene en TODAS las resoluciones (ver también
   la regla de mayor especificidad .power-page .power-toolbar más abajo). */

.power-page #search,
.power-search-input,
#search-alumno,
.power-search {
  width: 100% !important;
  height: 36px !important;
  padding: 0 12px 0 34px !important;
  border-radius: 10px !important;
  background-color: rgba(9, 9, 11, 0.7) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.8rem !important;
  color: var(--power-text-main, var(--power-text)) !important;
  outline: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.power-page #search:focus,
.power-search:focus,
.power-search-input:focus {
  border-color: var(--power-accent) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 16px var(--power-accent-soft), inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.alumnos-grid,
.roster-grid,
.company-roster-grid,
.power-hud #grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.alumno-card,
.alumno-item-card,
.rpg-card.alumno-card {
  background: rgba(12, 10, 16, 0.45) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid var(--power-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.alumno-card:hover,
.rpg-card.alumno-card:hover {
  border-color: var(--power-accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px var(--power-accent-soft) !important;
}

/* ============================================================================
 * RONDA 9 · Bloque 3 — "K-Pop Photocards & TFT Banners"
 * Reconvierte la tarjeta de alumno (horizontal, ficha administrativa) a un
 * formato vertical de carta coleccionable. No se toca el HTML de alumnos.js
 * más allá de agregar el rango/nickname: la barra de acciones pasa de
 * "overlay absoluto arriba" a "barra inferior compacta" solo con flex `order`
 * (misma posición en el DOM, .rpg-card ya es flex-column) — mínimo riesgo de
 * romper los listeners existentes (siguen atados a los mismos data-*).
 * ========================================================================== */
.rpg-card.alumno-card {
  min-height: 0;
  padding: 1.1rem 0.9rem 0.75rem;
}
.alumno-card .rpg-card-body {
  order: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: 0;
  gap: 0.5rem;
}
.alumno-card .rpg-card-info {
  align-items: center;
  width: 100%;
}
.alumno-card .rpg-badges {
  justify-content: center;
}
.alumno-card .rpg-name {
  white-space: normal;
  font-size: 1.05rem;
}
.alumno-card .rpg-nickname {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--pw-hextech-gold-bright, #f59e0b);
  margin: 0;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}
.alumno-card .rpg-id {
  font-family: 'Orbitron', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
}
.alumno-card .rpg-meta {
  margin-top: 0.15rem;
  padding-top: 0;
}
/* Avatar central "pose destacada" con marco de gema (bisel dorado + glow) */
.alumno-card .rpg-avatar-frame {
  width: 104px;
  height: 138px;
  margin: 0 auto;
  padding: 4px;
  border-radius: 0.9rem;
  background: linear-gradient(155deg, var(--pw-hextech-gold, #c8aa6e), rgba(200, 170, 110, 0.25) 45%, #18181b 75%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 22px -4px rgba(200, 170, 110, 0.45);
}
.alumno-card .rpg-avatar-frame > * { border-radius: 0.7rem; }
/* Barra de micro-acciones: de overlay superior a barra inferior compacta */
.alumno-card .rpg-card-actions {
  order: 3;
  position: static;
  justify-content: center;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(200, 170, 110, 0.18);
  width: 100%;
}
/* Reflejo holográfico sutil: banda diagonal que cruza la carta en hover */
.rpg-card.alumno-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.04) 52%, transparent 62%);
  background-size: 220% 220%;
  background-position: -40% -40%;
  opacity: 0;
  transition: opacity 0.25s ease, background-position 0.6s ease;
}
.rpg-card.alumno-card:hover::after {
  opacity: 1;
  background-position: 40% 40%;
}
@media (prefers-reduced-motion: reduce) {
  .rpg-card.alumno-card::after { transition: none; }
}
/* Mini-insignias de rango (DIRECTOR / COMPANY ELITE / MAIN DANCER / TRAINEE) */
.rpg-rank-badge {
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.rpg-rank-director {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.45);
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.rpg-rank-company {
  background: rgba(168, 85, 247, 0.16);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.45);
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}
.rpg-rank-dancer {
  background: rgba(200, 170, 110, 0.16);
  color: #f4e9d0;
  border: 1px solid rgba(200, 170, 110, 0.45);
}
.rpg-rank-trainee {
  background: rgba(255, 255, 255, 0.05);
  color: #a1a1aa;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.alumno-name,
.alumno-card h3,
.rpg-card.alumno-card .rpg-name,
.company-rpg-card .name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--power-text-main, var(--power-text)) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em !important;
}

.rpg-badges > span,
.badge-status,
.status-pill,
.badge-pago {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.alumno-card.is-ok .rpg-badges > span:first-child,
.badge-status.al-dia,
.status-pill.paid,
.badge-al-dia {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2) !important;
}

.alumno-card.is-pendiente .rpg-badges > span:first-child,
.badge-status.pendiente,
.status-pill.pending,
.badge-pendiente {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #facc15 !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.2) !important;
}

.alumno-card.is-riesgo .rpg-badges > span:first-child,
.badge-status.riesgo,
.status-pill.unpaid,
.badge-en-riesgo {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

/* ==========================================================================
   SKIN: CAFÉ CON LECHE (ANIME CAFÉ LIQUID & STEAM ASMR)
   ========================================================================== */

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud,
html[data-power-skin="cafe-con-leche"] body.power-hud {
  --power-accent: #d4a373;
  --power-accent-soft: rgba(212, 163, 115, 0.28);
  --power-bg-main: #120b07;
  --power-bg-card: rgba(22, 15, 11, 0.45);
  --power-border: rgba(212, 163, 115, 0.4);
  background-color: var(--power-bg-main) !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(250, 237, 205, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(212, 163, 115, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(67, 40, 24, 0.6) 0%, transparent 70%),
    repeating-radial-gradient(circle at 40% 45%, rgba(254, 250, 224, 0.1) 0px, rgba(212, 163, 115, 0.15) 20px, transparent 40px) !important;
  background-size: 140% 140%, 150% 150%, 120% 120%, 80px 80px !important;
  animation: animeCoffeeSwirl 16s infinite ease-in-out alternate !important;
}

@keyframes animeCoffeeSwirl {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%, 0 0;
    transform: scale(1) rotate(0deg);
  }
  50% {
    background-position: 50% 30%, 30% 70%, 40% 60%, 40px 40px;
    transform: scale(1.06) rotate(1.5deg);
  }
  100% {
    background-position: 100% 100%, 0% 0%, 60% 40%, 80px 80px;
    transform: scale(1.02) rotate(-1deg);
  }
}

html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    linear-gradient(0deg, transparent 0%, rgba(250, 237, 205, 0.12) 50%, transparent 100%),
    radial-gradient(ellipse at 50% 100%, rgba(212, 163, 115, 0.3) 0%, transparent 65%) !important;
  background-size: 100% 200%, 100% 100% !important;
  animation: animeSteamRise 9s linear infinite !important;
  filter: blur(8px);
}

@keyframes animeSteamRise {
  0% {
    background-position: 0 100%, 0 0;
    opacity: 0.5;
  }
  50% {
    opacity: 0.85;
  }
  100% {
    background-position: 0 -100%, 0 0;
    opacity: 0.5;
  }
}

html[data-power-accent="cafe-con-leche"] .power-card:hover,
html[data-power-accent="cafe-con-leche"] .rpg-card:hover,
html[data-power-accent="cafe-con-leche"] .curso-card:hover,
html.accent-skin-cafe-con-leche .power-card:hover,
html.accent-skin-cafe-con-leche .rpg-card:hover,
html.accent-skin-cafe-con-leche .curso-card:hover {
  border-color: #faedcd !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 163, 115, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] body.power-hud::before,
  html.accent-skin-cafe-con-leche body.power-hud::before,
  html[data-power-accent="cafe-con-leche"] body.power-hud::after,
  html.accent-skin-cafe-con-leche body.power-hud::after {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
}

/* ==========================================================================
   SKIN: CAFÉ CON LECHE (4K ANIME LATTE ART & COFFEE LIVE WALLPAPER)
   ========================================================================== */

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud,
html[data-power-skin="cafe-con-leche"] body.power-hud {
  --power-accent: #d4a373;
  --power-accent-soft: rgba(212, 163, 115, 0.3);
  --power-bg-main: #0c0806;
  --power-bg-card: rgba(18, 12, 9, 0.45);
  --power-border: rgba(212, 163, 115, 0.35);
  background-color: var(--power-bg-main) !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(ellipse 90% 70% at 20% 20%, rgba(254, 250, 224, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 80% 80%, rgba(212, 163, 115, 0.35) 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(79, 48, 29, 0.8) 0%, transparent 80%),
    linear-gradient(135deg, rgba(38, 22, 14, 0.9) 0%, rgba(12, 8, 6, 0.95) 100%) !important;
  background-size: 200% 200% !important;
  background-repeat: no-repeat !important;
  background-position: 0% 0% !important;
  animation: animeLatteSwirlFull 18s infinite ease-in-out alternate !important;
}

@keyframes animeLatteSwirlFull {
  0% {
    background-position: 0% 0%;
    transform: scale(1);
  }
  50% {
    background-position: 100% 100%;
    transform: scale(1.04) rotate(0.8deg);
  }
  100% {
    background-position: 50% 0%;
    transform: scale(1.02) rotate(-0.5deg);
  }
}

html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    radial-gradient(circle at 50% 100%, rgba(250, 237, 205, 0.22) 0%, transparent 70%),
    linear-gradient(0deg, transparent 0%, rgba(212, 163, 115, 0.12) 50%, transparent 100%) !important;
  background-size: 100vw 200vh !important;
  background-repeat: no-repeat !important;
  animation: animeSteamFlow 12s linear infinite !important;
  filter: blur(12px);
}

@keyframes animeSteamFlow {
  0% {
    background-position: 0 100vh, 0 0;
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    background-position: 0 -100vh, 0 0;
    opacity: 0.4;
  }
}

html[data-power-accent="cafe-con-leche"] .power-card,
html[data-power-accent="cafe-con-leche"] .rpg-card,
html[data-power-accent="cafe-con-leche"] .company-rpg-card,
html[data-power-accent="cafe-con-leche"] .curso-card,
html.accent-skin-cafe-con-leche .power-card,
html.accent-skin-cafe-con-leche .rpg-card,
html.accent-skin-cafe-con-leche .company-rpg-card,
html.accent-skin-cafe-con-leche .curso-card {
  background: rgba(18, 12, 9, 0.45) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(212, 163, 115, 0.3) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(254, 250, 224, 0.15) !important;
}

html[data-power-accent="cafe-con-leche"] .power-card:hover,
html[data-power-accent="cafe-con-leche"] .rpg-card:hover,
html.accent-skin-cafe-con-leche .power-card:hover,
html.accent-skin-cafe-con-leche .rpg-card:hover {
  border-color: #faedcd !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 163, 115, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] body.power-hud::before,
  html.accent-skin-cafe-con-leche body.power-hud::before,
  html[data-power-accent="cafe-con-leche"] body.power-hud::after,
  html.accent-skin-cafe-con-leche body.power-hud::after {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
}

/* ==========================================================================
   SKIN: CAFÉ CON LECHE (COZY LOFI ANIME CAFE & LATTE ART 4K)
   ========================================================================== */

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud {
  --power-accent: #f4a261;
  --power-accent-soft: rgba(244, 162, 97, 0.28);
  --power-bg-main: #140d08;
  --power-bg-card: rgba(28, 18, 12, 0.55);
  --power-border: rgba(244, 162, 97, 0.35);
  background-color: var(--power-bg-main) !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 183, 3, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(244, 162, 97, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 85%, rgba(230, 57, 70, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 120% 90% at 30% 60%, rgba(250, 237, 205, 0.2) 0%, transparent 55%),
    linear-gradient(160deg, #1c110b 0%, #100a06 50%, #080503 100%) !important;
  background-size: 160% 160% !important;
  background-repeat: no-repeat !important;
  background-position: 0% 0% !important;
  animation: animeLofiCafeGlow 20s ease-in-out infinite alternate !important;
}

@keyframes animeLofiCafeGlow {
  0% {
    background-position: 0% 0%;
    transform: scale(1);
  }
  50% {
    background-position: 100% 80%;
    transform: scale(1.03) rotate(0.4deg);
  }
  100% {
    background-position: 30% 100%;
    transform: scale(1.01) rotate(-0.3deg);
  }
}

html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(254, 250, 224, 0.2) 0%, transparent 70%),
    linear-gradient(0deg, transparent 0%, rgba(244, 162, 97, 0.1) 40%, transparent 85%) !important;
  background-size: 100vw 200vh !important;
  background-repeat: no-repeat !important;
  animation: animeLofiSteamRise 14s ease-in-out infinite !important;
  filter: blur(16px);
}

@keyframes animeLofiSteamRise {
  0% {
    background-position: 0 100vh, 0 0;
    opacity: 0.35;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    background-position: 0 -100vh, 0 0;
    opacity: 0.35;
  }
}

html[data-power-accent="cafe-con-leche"] .power-card,
html[data-power-accent="cafe-con-leche"] .rpg-card,
html[data-power-accent="cafe-con-leche"] .company-rpg-card,
html[data-power-accent="cafe-con-leche"] .curso-card,
html[data-power-accent="cafe-con-leche"] .pw-panel,
html.accent-skin-cafe-con-leche .power-card,
html.accent-skin-cafe-con-leche .rpg-card,
html.accent-skin-cafe-con-leche .company-rpg-card,
html.accent-skin-cafe-con-leche .curso-card,
html.accent-skin-cafe-con-leche .pw-panel {
  background: rgba(28, 18, 12, 0.52) !important;
  backdrop-filter: blur(18px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
  border: 1px solid rgba(244, 162, 97, 0.32) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(254, 250, 224, 0.18) !important;
}

html[data-power-accent="cafe-con-leche"] .power-card:hover,
html[data-power-accent="cafe-con-leche"] .rpg-card:hover,
html[data-power-accent="cafe-con-leche"] .curso-card:hover,
html.accent-skin-cafe-con-leche .power-card:hover,
html.accent-skin-cafe-con-leche .rpg-card:hover,
html.accent-skin-cafe-con-leche .curso-card:hover {
  border-color: #ffe8d6 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(244, 162, 97, 0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] body.power-hud::before,
  html.accent-skin-cafe-con-leche body.power-hud::before,
  html[data-power-accent="cafe-con-leche"] body.power-hud::after,
  html.accent-skin-cafe-con-leche body.power-hud::after {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
}

/* --- Botones con líquido de café --- */
html[data-power-accent="cafe-con-leche"] .power-cta,
html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta,
html[data-power-accent="cafe-con-leche"] #btn-registrar-pago,
html[data-power-accent="cafe-con-leche"] .power-user-pill,
html[data-power-accent="cafe-con-leche"] .power-nav-slot.is-active,
html.accent-skin-cafe-con-leche .power-cta,
html.accent-skin-cafe-con-leche .power-user-pill,
html.accent-skin-cafe-con-leche header #power-main-nav .power-nav-slot.is-active {
  position: relative !important;
  background: linear-gradient(180deg, #d4a373 0%, #a57548 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(212, 163, 115, 0.4) !important;
}

html[data-power-accent="cafe-con-leche"] .power-cta,
html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta,
html.accent-skin-cafe-con-leche .power-cta {
  overflow: hidden !important;
}

html[data-power-accent="cafe-con-leche"] .power-cta::before,
html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta::before,
html.accent-skin-cafe-con-leche .power-cta::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(ellipse at center, rgba(254, 250, 224, 0.45) 0%, rgba(212, 163, 115, 0.1) 60%, transparent 80%) !important;
  animation: buttonLiquidWave 6s infinite ease-in-out !important;
  pointer-events: none !important;
  z-index: 0;
}

html[data-power-accent="cafe-con-leche"] .power-cta > *,
html.accent-skin-cafe-con-leche .power-cta > * {
  position: relative;
  z-index: 1;
}

@keyframes buttonLiquidWave {
  0% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(-8px); }
  100% { transform: rotate(360deg) translateY(0); }
}

/* Empañado de vapor: html::after (no body::after — esa capa ya es el steam lofi) */
html[data-power-accent="cafe-con-leche"]::after,
html.accent-skin-cafe-con-leche::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 100%, rgba(250, 237, 205, 0.25) 0%, rgba(212, 163, 115, 0.1) 40%, transparent 80%) !important;
  animation: steamFogCycle 18s infinite ease-in-out !important;
}

@keyframes steamFogCycle {
  0%, 100% { opacity: 0.2; }
  45%, 55% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] .power-cta::before,
  html.accent-skin-cafe-con-leche .power-cta::before,
  html[data-power-accent="cafe-con-leche"]::after,
  html.accent-skin-cafe-con-leche::after {
    animation: none !important;
  }
}

/* ==========================================================================
   DESBLOQUEO DE FONDOS Y ATMÓSFERA COZY ANIME CAFE 4K
   ========================================================================== */

html[data-power-accent="cafe-con-leche"] body,
html.accent-skin-cafe-con-leche body,
html[data-power-accent="cafe-con-leche"] .bg-zinc-950,
html.accent-skin-cafe-con-leche .bg-zinc-950,
html[data-power-accent="cafe-con-leche"] .power-page,
html.accent-skin-cafe-con-leche .power-page,
html[data-power-accent="cafe-con-leche"] main,
html.accent-skin-cafe-con-leche main {
  background-color: transparent !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud {
  --power-accent: #f4a261;
  --power-accent-soft: rgba(244, 162, 97, 0.35);
  --power-bg-main: #180e09;
  --power-border: rgba(244, 162, 97, 0.4);
  background-color: #180e09 !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(circle at 50% 10%, rgba(255, 183, 3, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(244, 162, 97, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 80% 75%, rgba(230, 57, 70, 0.18) 0%, transparent 65%),
    linear-gradient(165deg, #2b1810 0%, #180e09 50%, #0d0604 100%) !important;
  background-size: 180% 180% !important;
  background-repeat: no-repeat !important;
  animation: lofiCafeGlow 16s ease-in-out infinite alternate !important;
}

@keyframes lofiCafeGlow {
  0% { background-position: 0% 0%; transform: scale(1); }
  50% { background-position: 100% 100%; transform: scale(1.03); }
  100% { background-position: 30% 70%; transform: scale(1.01); }
}

html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(254, 250, 224, 0.25) 0%, transparent 70%),
    linear-gradient(0deg, transparent 0%, rgba(244, 162, 97, 0.12) 40%, transparent 80%) !important;
  background-size: 100vw 200vh !important;
  background-repeat: no-repeat !important;
  animation: lofiSteamFlow 12s ease-in-out infinite !important;
  filter: blur(14px);
}

@keyframes lofiSteamFlow {
  0% { background-position: 0 100vh, 0 0; opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { background-position: 0 -100vh, 0 0; opacity: 0.4; }
}

html[data-power-accent="cafe-con-leche"] .power-card,
html[data-power-accent="cafe-con-leche"] .rpg-card,
html[data-power-accent="cafe-con-leche"] .company-rpg-card,
html[data-power-accent="cafe-con-leche"] .curso-card,
html[data-power-accent="cafe-con-leche"] .pw-panel,
html.accent-skin-cafe-con-leche .power-card,
html.accent-skin-cafe-con-leche .rpg-card,
html.accent-skin-cafe-con-leche .company-rpg-card,
html.accent-skin-cafe-con-leche .curso-card,
html.accent-skin-cafe-con-leche .pw-panel {
  background: rgba(42, 24, 16, 0.52) !important;
  backdrop-filter: blur(16px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
  border: 1px solid rgba(244, 162, 97, 0.35) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(254, 250, 224, 0.2) !important;
}

html[data-power-accent="cafe-con-leche"] .power-card:hover,
html[data-power-accent="cafe-con-leche"] .rpg-card:hover,
html.accent-skin-cafe-con-leche .power-card:hover,
html.accent-skin-cafe-con-leche .rpg-card:hover {
  border-color: #ffe8d6 !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(244, 162, 97, 0.45) !important;
}

html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta,
html[data-power-accent="cafe-con-leche"] .power-cta,
html[data-power-accent="cafe-con-leche"] header #power-main-nav .power-nav-slot.is-active,
html.accent-skin-cafe-con-leche .power-cta,
html.accent-skin-cafe-con-leche header #power-main-nav .power-nav-slot.is-active {
  background: linear-gradient(135deg, #f4a261 0%, #e76f51 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 18px rgba(244, 162, 97, 0.5) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] body.power-hud::before,
  html.accent-skin-cafe-con-leche body.power-hud::before,
  html[data-power-accent="cafe-con-leche"] body.power-hud::after,
  html.accent-skin-cafe-con-leche body.power-hud::after {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
}

/* ==========================================================================
   SKIN: CAFÉ CON LECHE (PALETA SERENA COZY LOFI ANIME 4K)
   ========================================================================== */

html[data-power-accent="cafe-con-leche"] body.power-hud,
html.accent-skin-cafe-con-leche body.power-hud {
  --power-accent: #e6b87d;
  --power-accent-soft: rgba(230, 184, 125, 0.18);
  --power-bg-main: #140e0a;
  --power-bg-card: rgba(28, 20, 15, 0.55);
  --power-border: rgba(230, 184, 125, 0.22);
  background-color: #140e0a !important;
}

html[data-power-accent="cafe-con-leche"] body.power-hud::before,
html.accent-skin-cafe-con-leche body.power-hud::before {
  background-image:
    radial-gradient(circle at 50% 15%, rgba(230, 184, 125, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 50%, rgba(212, 163, 115, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(198, 139, 89, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #18110c 0%, #120d08 100%) !important;
  background-size: 140% 140% !important;
  background-repeat: no-repeat !important;
  background-position: 0% 0% !important;
  animation: lofiSereneBreathing 22s ease-in-out infinite alternate !important;
}

@keyframes lofiSereneBreathing {
  0% { background-position: 0% 0%; opacity: 0.85; }
  50% { background-position: 50% 50%; opacity: 1; }
  100% { background-position: 100% 100%; opacity: 0.85; }
}

html[data-power-accent="cafe-con-leche"] body.power-hud::after,
html.accent-skin-cafe-con-leche body.power-hud::after {
  background:
    radial-gradient(ellipse 60% 35% at 50% 100%, rgba(253, 251, 247, 0.12) 0%, transparent 70%),
    linear-gradient(0deg, transparent 0%, rgba(230, 184, 125, 0.06) 50%, transparent 90%) !important;
  background-size: 100vw 200vh !important;
  background-repeat: no-repeat !important;
  animation: lofiSoftSteam 16s ease-in-out infinite !important;
  filter: blur(20px);
}

@keyframes lofiSoftSteam {
  0% { background-position: 0 100vh, 0 0; opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { background-position: 0 -100vh, 0 0; opacity: 0.3; }
}

html[data-power-accent="cafe-con-leche"] .power-card,
html[data-power-accent="cafe-con-leche"] .rpg-card,
html[data-power-accent="cafe-con-leche"] .company-rpg-card,
html[data-power-accent="cafe-con-leche"] .curso-card,
html[data-power-accent="cafe-con-leche"] .pw-panel,
html.accent-skin-cafe-con-leche .power-card,
html.accent-skin-cafe-con-leche .rpg-card,
html.accent-skin-cafe-con-leche .company-rpg-card,
html.accent-skin-cafe-con-leche .curso-card,
html.accent-skin-cafe-con-leche .pw-panel {
  background: rgba(28, 20, 15, 0.55) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(230, 184, 125, 0.22) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(253, 251, 247, 0.12) !important;
}

html[data-power-accent="cafe-con-leche"] .power-card:hover,
html[data-power-accent="cafe-con-leche"] .rpg-card:hover,
html.accent-skin-cafe-con-leche .power-card:hover,
html.accent-skin-cafe-con-leche .rpg-card:hover {
  border-color: rgba(230, 184, 125, 0.5) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(230, 184, 125, 0.25) !important;
}

html[data-power-accent="cafe-con-leche"] .dash-action-bar .power-cta,
html[data-power-accent="cafe-con-leche"] .power-cta,
html[data-power-accent="cafe-con-leche"] header #power-main-nav .power-nav-slot.is-active,
html.accent-skin-cafe-con-leche .power-cta,
html.accent-skin-cafe-con-leche header #power-main-nav .power-nav-slot.is-active {
  background: linear-gradient(135deg, #e6b87d 0%, #c68b59 100%) !important;
  color: #140e0a !important;
  font-weight: 700 !important;
  border: 1px solid rgba(253, 251, 247, 0.4) !important;
  box-shadow: 0 4px 16px rgba(230, 184, 125, 0.3) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cafe-con-leche"] body.power-hud::before,
  html.accent-skin-cafe-con-leche body.power-hud::before,
  html[data-power-accent="cafe-con-leche"] body.power-hud::after,
  html.accent-skin-cafe-con-leche body.power-hud::after {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
}

/* ==========================================================================
   AMPLITUD DE TARJETAS DE ALUMNOS, MÉTRICAS DE CURSOS Y SIMETRÍA EN PERFIL
   ========================================================================== */

/* 1. TARJETAS DE ALUMNOS MÁS AMPLIAS Y NOMBRES LEGIBLES */
.alumnos-grid,
.roster-grid,
.company-roster-grid,
#grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.alumno-card,
.rpg-card.alumno-card {
  padding: 20px !important;
  min-height: 168px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.company-rpg-card {
  padding: 20px !important;
}

.alumno-name,
.rpg-name,
.company-rpg-card .name,
.company-rpg-card h3,
.alumno-card h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  margin-bottom: 8px !important;
}

/* 2. RESTAURACIÓN DE MÉTRICAS SUPERIORES EN LA SECCIÓN DE CURSOS */
.cursos-stats-bar,
.cursos-metrics-grid,
#cursos-stats-head,
.power-cursos-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

.cursos-metric-card,
.curso-stat-box {
  background: rgba(28, 20, 15, 0.5) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid var(--power-border) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.cursos-metric-value,
.curso-stat-num {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--power-accent) !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

.cursos-metric-label,
.curso-stat-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--power-text-muted, #94a3b8) !important;
}

/* 3. CENTRADO Y SIMETRÍA EN PANTALLA DE PERFIL */
.perfil-card,
.profile-header,
.perfil-container,
#perfil-page-head,
.perfil-page .pf-hero,
.perfil-page .pf-hero-card-layout,
.perfil-page .pf-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.perfil-roles-group,
.profile-actions,
.perfil-buttons-bar,
.perfil-page .pf-badges,
.perfil-page #pf-role-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 16px auto 0 auto !important;
  flex-wrap: wrap !important;
}

.perfil-avatar-wrapper,
.profile-image-container,
.perfil-page .pf-avatar-box {
  margin: 0 auto 12px auto !important;
}

/* ==========================================================================
   CENTRADO GEOMÉTRICO ABSOLUTO DEL HEADER EN PC (>=768px)
   ========================================================================== */

@media (min-width: 768px) {
  .power-console-header .power-console-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }

  /* Nav anidado en tools: contents para que brand | nav | end sean hermanos flex */
  .power-console-header .power-header-tools,
  .power-console-header #power-header-tools {
    display: contents !important;
  }

  .power-console-header .power-header-brand-container {
    flex: 1 1 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0;
  }

  .power-console-header .power-brand,
  .power-console-header #brand-home {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .power-console-header .power-header-end {
    flex: 1 1 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0;
  }

  .power-console-header #power-header-actions:empty {
    display: none !important;
  }

  .power-console-header #power-main-nav,
  .power-console-header .power-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 auto !important;
  }

  .power-console-header #power-main-nav .power-nav-slot,
  .power-console-header #power-main-nav .power-nav-link {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   2. REDISEÑO MODERNO Y SIMÉTRICO DE TARJETAS DE ALUMNOS (CYBER-GLASS AAA)
   ========================================================================== */

#grid,
.alumnos-grid,
.roster-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  padding: 12px 0 !important;
  box-sizing: border-box !important;
}

.rpg-card.alumno-card,
.alumno-card {
  background: rgba(18, 14, 22, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid var(--power-border) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto auto auto !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  align-items: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.company-rpg-card {
  background: rgba(18, 14, 22, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid var(--power-border) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

.rpg-card.alumno-card:hover,
.alumno-card:hover {
  border-color: var(--power-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7), 0 0 28px var(--power-accent-soft) !important;
}

.rpg-card.alumno-card .rpg-card-body,
.rpg-card.alumno-card .rpg-card-info {
  display: contents !important;
}

.alumno-card-top,
.rpg-card-header,
.rpg-card.alumno-card .rpg-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 8px !important;
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  position: relative;
  z-index: 1;
}

.rpg-card.alumno-card .rpg-badges > span,
.badge-status,
.status-pill,
.badge-pago,
.rpg-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.725rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.alumno-card-actions,
.rpg-card.alumno-card .rpg-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  align-self: stretch !important;
  z-index: 5;
}

.rpg-card.alumno-card .rpg-card-actions .edit-btn,
.rpg-card.alumno-card .rpg-card-actions .wa-btn-card,
.rpg-card.alumno-card .rpg-card-actions button,
.alumno-card-actions a,
.alumno-card-actions button,
.rpg-action-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--power-text-muted, #94a3b8) !important;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease !important;
}

.rpg-card.alumno-card .rpg-card-actions .edit-btn:hover,
.rpg-card.alumno-card .rpg-card-actions button:hover,
.alumno-card-actions a:hover,
.alumno-card-actions button:hover {
  color: #ffffff !important;
  border-color: var(--power-accent) !important;
  background: var(--power-accent-soft) !important;
}

.alumno-card-body,
.rpg-card-content {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.rpg-card.alumno-card .rpg-avatar-frame,
.alumno-avatar,
.rpg-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 2px solid var(--power-accent) !important;
  box-shadow: 0 0 12px var(--power-accent-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  padding: 2px !important;
  grid-column: 1 !important;
  grid-row: 2 / span 4 !important;
  align-self: start !important;
  position: relative;
  z-index: 1;
}

.rpg-card.alumno-card .rpg-avatar-frame > *,
.rpg-card.alumno-card .rpg-avatar-frame .alu-list-avatar,
.rpg-card.alumno-card .rpg-avatar-frame .alu-list-avatar--ini,
.rpg-card.alumno-card .rpg-avatar-frame .alu-list-avatar-wrap {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.alumno-info,
.rpg-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: hidden !important;
}

.rpg-card.alumno-card .rpg-name,
.rpg-name,
.alumno-name,
.alumno-card h3 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  position: relative;
  z-index: 1;
}

.rpg-card.alumno-card .rpg-id {
  grid-column: 2 / 4 !important;
  grid-row: 3 !important;
}

.rpg-card.alumno-card .rpg-tel {
  grid-column: 2 / 4 !important;
  grid-row: 4 !important;
}

.rpg-card.alumno-card .rpg-meta {
  grid-column: 2 / 4 !important;
  grid-row: 5 !important;
}

.rpg-card.alumno-card .rpg-id,
.rpg-card.alumno-card .rpg-tel,
.rpg-card.alumno-card .rpg-meta,
.rpg-subtext,
.alumno-id,
.alumno-phone {
  font-size: 0.8rem !important;
  color: var(--power-text-muted, #94a3b8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   SKIN: MINT / MENTA VIP (CYBER-MINT ARCTIC 4K & CRYSTAL FROST)
   ========================================================================== */

/* 1. VARIABLES CROMÁTICAS VIP MENTA ESMERALDA */
html[data-power-accent="mint"],
html[data-power-accent="menta"],
html.accent-skin-mint,
html.accent-skin-menta,
html[data-power-accent="mint"] body.power-hud,
html[data-power-accent="menta"] body.power-hud,
html.accent-skin-mint body.power-hud,
html.accent-skin-menta body.power-hud {
  --power-accent: #00f5d4 !important;
  --power-accent-soft: rgba(0, 245, 212, 0.25) !important;
  --power-accent-glow: rgba(0, 245, 212, 0.4) !important;
  --power-bg-main: #061412 !important;
  --power-bg-card: rgba(10, 28, 24, 0.5) !important;
  --power-border: rgba(0, 245, 212, 0.35) !important;
}

html[data-power-accent="mint"] body,
html[data-power-accent="menta"] body,
html.accent-skin-mint body,
html.accent-skin-menta body,
html[data-power-accent="mint"] .bg-zinc-950,
html[data-power-accent="menta"] .bg-zinc-950,
html.accent-skin-mint .bg-zinc-950,
html.accent-skin-menta .bg-zinc-950,
html[data-power-accent="mint"] .power-page,
html[data-power-accent="menta"] .power-page,
html.accent-skin-mint .power-page,
html.accent-skin-menta .power-page,
html[data-power-accent="mint"] main,
html[data-power-accent="menta"] main,
html.accent-skin-mint main,
html.accent-skin-menta main {
  background-color: transparent !important;
}

html[data-power-accent="mint"] body.power-hud,
html[data-power-accent="menta"] body.power-hud,
html.accent-skin-mint body.power-hud,
html.accent-skin-menta body.power-hud {
  background-color: #061412 !important;
}

/* 2. MATRIZ DE CRISTALES Y DESTELLOS MENTA EN DERIVA (CAPA 1) */
html[data-power-accent="mint"] body.power-hud::before,
html[data-power-accent="menta"] body.power-hud::before,
html.accent-skin-mint body.power-hud::before,
html.accent-skin-menta body.power-hud::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(0, 245, 212, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(45, 212, 191, 0.2) 0%, transparent 50%),
    radial-gradient(rgba(0, 245, 212, 0.3) 1.5px, transparent 1.5px),
    linear-gradient(165deg, #0a221f 0%, #061412 50%, #030a09 100%) !important;
  background-size: 150% 150%, 150% 150%, 32px 32px, 100% 100% !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  animation: mintArcticDrift 16s ease-in-out infinite alternate !important;
}

@keyframes mintArcticDrift {
  0% { background-position: 0% 0%, 100% 100%, 0 0, 0 0; transform: scale(1); }
  50% { background-position: 80% 50%, 20% 50%, 16px 16px, 0 0; transform: scale(1.02); }
  100% { background-position: 100% 100%, 0% 0%, 32px 32px, 0 0; transform: scale(1); }
}

/* 3. ATMÓSFERA DE BRISA FRESCA Y CALOR HELADO (CAPA 2) */
html[data-power-accent="mint"] body.power-hud::after,
html[data-power-accent="menta"] body.power-hud::after,
html.accent-skin-mint body.power-hud::after,
html.accent-skin-menta body.power-hud::after {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 245, 212, 0.2) 0%, transparent 70%),
    linear-gradient(0deg, transparent 0%, rgba(45, 212, 191, 0.08) 50%, transparent 90%) !important;
  background-size: 100vw 200vh !important;
  background-repeat: no-repeat !important;
  animation: mintFrostBreeze 12s ease-in-out infinite !important;
  filter: blur(16px);
}

@keyframes mintFrostBreeze {
  0% { background-position: 0 100vh; opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { background-position: 0 -100vh; opacity: 0.4; }
}

/* 4. TARJETAS DE CRISTAL HELADO ESPEJADO */
html[data-power-accent="mint"] .power-card,
html[data-power-accent="menta"] .power-card,
html[data-power-accent="mint"] .rpg-card,
html[data-power-accent="menta"] .rpg-card,
html[data-power-accent="mint"] .company-rpg-card,
html[data-power-accent="menta"] .company-rpg-card,
html[data-power-accent="mint"] .curso-card,
html[data-power-accent="menta"] .curso-card,
html[data-power-accent="mint"] .pw-panel,
html[data-power-accent="menta"] .pw-panel,
html.accent-skin-mint .power-card,
html.accent-skin-menta .power-card,
html.accent-skin-mint .rpg-card,
html.accent-skin-menta .rpg-card,
html.accent-skin-mint .company-rpg-card,
html.accent-skin-menta .company-rpg-card,
html.accent-skin-mint .curso-card,
html.accent-skin-menta .curso-card,
html.accent-skin-mint .pw-panel,
html.accent-skin-menta .pw-panel {
  background: rgba(10, 28, 24, 0.5) !important;
  backdrop-filter: blur(18px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
  border: 1px solid rgba(0, 245, 212, 0.35) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(0, 245, 212, 0.2) !important;
}

html[data-power-accent="mint"] .power-card:hover,
html[data-power-accent="menta"] .power-card:hover,
html[data-power-accent="mint"] .rpg-card:hover,
html[data-power-accent="menta"] .rpg-card:hover,
html.accent-skin-mint .power-card:hover,
html.accent-skin-menta .power-card:hover,
html.accent-skin-mint .rpg-card:hover,
html.accent-skin-menta .rpg-card:hover {
  border-color: #00f5d4 !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 32px rgba(0, 245, 212, 0.45) !important;
}

/* 5. BOTONES Y PESTAÑAS ACTIVAS MENTA NEÓN VIP */
html[data-power-accent="mint"] .dash-action-bar .power-cta,
html[data-power-accent="menta"] .dash-action-bar .power-cta,
html[data-power-accent="mint"] .power-cta,
html[data-power-accent="menta"] .power-cta,
html[data-power-accent="mint"] a.power-cta[data-power-nav-cta="registrar"],
html[data-power-accent="menta"] a.power-cta[data-power-nav-cta="registrar"],
html[data-power-accent="mint"] header #power-main-nav .power-nav-slot.is-active,
html[data-power-accent="menta"] header #power-main-nav .power-nav-slot.is-active,
html[data-power-accent="mint"] header #power-main-nav .power-nav-slot[aria-current="page"],
html[data-power-accent="menta"] header #power-main-nav .power-nav-slot[aria-current="page"],
html.accent-skin-mint .power-cta,
html.accent-skin-menta .power-cta,
html.accent-skin-mint header #power-main-nav .power-nav-slot.is-active,
html.accent-skin-menta header #power-main-nav .power-nav-slot.is-active,
html.accent-skin-mint header #power-main-nav .power-nav-slot[aria-current="page"],
html.accent-skin-menta header #power-main-nav .power-nav-slot[aria-current="page"] {
  background: linear-gradient(135deg, #00f5d4 0%, #059669 100%) !important;
  color: #041410 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 18px rgba(0, 245, 212, 0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="mint"] body.power-hud::before,
  html[data-power-accent="menta"] body.power-hud::before,
  html.accent-skin-mint body.power-hud::before,
  html.accent-skin-menta body.power-hud::before,
  html[data-power-accent="mint"] body.power-hud::after,
  html[data-power-accent="menta"] body.power-hud::after,
  html.accent-skin-mint body.power-hud::after,
  html.accent-skin-menta body.power-hud::after {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
}

/* ==========================================================================
   RESTRUCTURACIÓN DE ALUMNOS: BARRA DE BÚSQUEDA, RESPLANDOR Y SIMETRÍA
   ========================================================================== */

/* 1. REUBICACIÓN Y ESTILIZADO DEL BOTÓN + ALUMNO EN BARRA DE BÚSQUEDA
   RONDA 15: intervención quirúrgica definitiva — fila única e inquebrantable
   en TODAS las resoluciones (flex-direction:row forzado, no solo flex-wrap;
   el bug de "efecto pirámide" en móvil venía de un @media(max-width:639px)
   que forzaba flex-direction:column en otra regla más abajo del archivo —
   eliminado). #alu-toolbar (id, máxima especificidad) es la autoridad final:
   contenedor centrado, ancho máximo 1200px, alineado con el dock de filtros
   y la grilla de tarjetas. */
#alu-toolbar,
.power-search-container,
.alumnos-filter-bar,
.search-box-group,
.power-page .power-toolbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin: 0 0 0.5rem 0 !important;
}
/* Nota: sin max-width propio — hereda el ancho de #alu-toolbar/#filters/#grid
   dentro de <main class="power-page max-w-6xl lg:max-w-7xl mx-auto">, así
   los tres (buscador+botón, dock de filtros, grilla de tarjetas) comparten
   exactamente el mismo ancho y quedan siempre alineados en escritorio. */

#alu-toolbar #search,
.power-page .power-toolbar #search,
.power-page .power-toolbar .power-search {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
}

.power-page .power-toolbar .power-filters-scroll,
.power-page .power-toolbar #filters {
  flex: 1 1 100% !important;
  width: 100% !important;
}

#btn-nuevo,
#btn-add-alumno,
#btn-nuevo-alumno,
.btn-add-alumno {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  height: 36px !important;
  padding: 0 0.75rem !important;
  border-radius: 10px !important;
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  margin: 0 !important;
  align-self: center !important;
  flex: 0 0 auto !important;
}

/* Icono ＋ visible siempre; la etiqueta "ALUMNO" se oculta bajo 380px de
   ancho de viewport para que el botón nunca fuerce el quiebre de fila. */
#btn-nuevo .btn-nuevo-icon {
  font-size: 0.95rem;
  line-height: 1;
}
@media (max-width: 379px) {
  #btn-nuevo .btn-nuevo-label {
    display: none;
  }
  #btn-nuevo {
    padding: 0 0.6rem !important;
  }
}

/* 2. RETÍCULA Y TARJETAS CON ALTURA UNIFORME */
#grid,
.alumnos-grid,
.roster-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.rpg-card.alumno-card,
.alumno-card {
  height: 100% !important;
  min-height: 170px !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  background: rgba(16, 12, 20, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. FILA SUPERIOR: BADGES COMPACTOS SIN SOBREPOSICIÓN */
.rpg-card.alumno-card .rpg-badges,
.rpg-card-header,
.alumno-badges-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

.rpg-card.alumno-card .rpg-badges > span,
.rpg-card.alumno-card .badge-company,
.badge-status,
.status-pill,
.badge-pago,
.rpg-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* 4. RESPLANDOR Y ALERTAS DIVERGENTES POR ESTADO DE PAGO */
.rpg-card.alumno-card.is-riesgo,
.rpg-card.is-unpaid,
.alumno-card.is-riesgo {
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.25), inset 0 0 12px rgba(239, 68, 68, 0.1) !important;
  animation: alertRiskGlow 3s infinite alternate ease-in-out !important;
}

@keyframes alertRiskGlow {
  0% { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 12px rgba(239, 68, 68, 0.2); }
  100% { border-color: rgba(239, 68, 68, 0.85); box-shadow: 0 0 24px rgba(239, 68, 68, 0.45); }
}

.rpg-card.alumno-card.is-ok,
.rpg-card.is-paid,
.alumno-card.is-ok {
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.2) !important;
}

.rpg-card.alumno-card.is-pendiente,
.alumno-card.is-pendiente {
  border: 1px solid rgba(234, 179, 8, 0.5) !important;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.2) !important;
}

/* 5. CUERPO Y TEXTO LIMPIO */
.rpg-card.alumno-card .rpg-name,
.rpg-name,
.alumno-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.rpg-card.alumno-card .rpg-id,
.rpg-card.alumno-card .rpg-tel,
.rpg-card.alumno-card .rpg-meta,
.rpg-subtext,
.alumno-phone,
.alumno-id {
  font-size: 0.775rem !important;
  color: var(--power-text-muted, #94a3b8) !important;
}

@media (prefers-reduced-motion: reduce) {
  .rpg-card.alumno-card.is-riesgo,
  .rpg-card.is-unpaid,
  .alumno-card.is-riesgo {
    animation: none !important;
  }
}

/* ==========================================================================
   1. ELIMINACIÓN DE REDUNDANCIA EN ENCABEZADO DE PAGO PROFES
   ========================================================================== */

.page-pago-profes .power-page-subtitle,
.page-pago-profes .power-section-head > div:first-child > .sub,
.page-pago-profes #subtitulo,
.pago-profes-subtitle {
  display: none !important;
}

.page-pago-profes .power-section-head #titulo-mes,
.page-pago-profes .power-section-head h2#titulo-mes {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--power-text-main, var(--power-text, #f4f4f5)) !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   SKIN: MINT / MENTA VIP (ULTRA DINÁMICA: PARTÍCULAS, AURORA Y BATERÍA PLASMA)
   ========================================================================== */

html[data-power-accent="mint"],
html[data-power-accent="menta"],
html.accent-skin-mint,
html.accent-skin-menta,
html[data-power-accent="mint"] body.power-hud,
html[data-power-accent="menta"] body.power-hud,
html.accent-skin-mint body.power-hud,
html.accent-skin-menta body.power-hud {
  --power-accent: #00f5d4 !important;
  --power-accent-soft: rgba(0, 245, 212, 0.3) !important;
  --power-accent-glow: rgba(0, 245, 212, 0.45) !important;
  --power-bg-main: #03100e !important;
  --power-bg-card: rgba(6, 24, 20, 0.48) !important;
  --power-border: rgba(0, 245, 212, 0.38) !important;
}

html[data-power-accent="mint"] body.power-hud,
html[data-power-accent="menta"] body.power-hud,
html.accent-skin-mint body.power-hud,
html.accent-skin-menta body.power-hud {
  background-color: #03100e !important;
}

/* 1. MANGUERA DE PARTÍCULAS Y HACES DE LUZ ESMERALDA EN MOVIMIENTO DIAGONAL */
html[data-power-accent="mint"] body.power-hud::before,
html[data-power-accent="menta"] body.power-hud::before,
html.accent-skin-mint body.power-hud::before,
html.accent-skin-menta body.power-hud::before {
  background-image:
    radial-gradient(circle 3px at 20% 30%, rgba(0, 245, 212, 0.8) 0%, transparent 100%),
    radial-gradient(circle 4px at 70% 60%, rgba(52, 211, 153, 0.8) 0%, transparent 100%),
    radial-gradient(circle 2px at 40% 80%, rgba(167, 243, 208, 0.9) 0%, transparent 100%),
    radial-gradient(circle 5px at 85% 20%, rgba(0, 245, 212, 0.7) 0%, transparent 100%),
    repeating-linear-gradient(135deg, rgba(0, 245, 212, 0.08) 0px, rgba(0, 245, 212, 0.08) 2px, transparent 2px, transparent 24px),
    linear-gradient(160deg, #061c18 0%, #03100e 60%, #010807 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 48px 48px, 100% 100% !important;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat !important;
  animation: mintParticleFlow 12s linear infinite !important;
}

@keyframes mintParticleFlow {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 300px -600px, -200px -400px, 400px -800px, -300px -500px, 48px 48px, 0 0; }
}

/* 2. AURORA FLUIDA BOREAL DE ESMERALDA Y CIAN */
html[data-power-accent="mint"] body.power-hud::after,
html[data-power-accent="menta"] body.power-hud::after,
html.accent-skin-mint body.power-hud::after,
html.accent-skin-menta body.power-hud::after {
  background:
    radial-gradient(ellipse 90% 60% at 20% -10%, rgba(0, 245, 212, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 80% 70% at 80% 110%, rgba(16, 185, 129, 0.28) 0%, transparent 70%),
    linear-gradient(45deg, transparent 30%, rgba(0, 245, 212, 0.15) 50%, transparent 70%) !important;
  background-size: 160% 160% !important;
  background-repeat: no-repeat !important;
  animation: mintAuroraFluid 10s ease-in-out infinite alternate !important;
}

@keyframes mintAuroraFluid {
  0% {
    background-position: 0% 0%;
    filter: blur(16px) hue-rotate(0deg);
  }
  50% {
    background-position: 100% 100%;
    filter: blur(22px) hue-rotate(15deg);
  }
  100% {
    background-position: 50% 100%;
    filter: blur(18px) hue-rotate(-10deg);
  }
}

/* 3. ANIMACIÓN FLUIDA DE BATERÍA PLASMA MENTA */
html[data-power-accent="mint"] .power-console-header #brand-home:not(.has-notif),
html[data-power-accent="menta"] .power-console-header #brand-home:not(.has-notif),
html.accent-skin-mint .power-console-header #brand-home:not(.has-notif),
html.accent-skin-menta .power-console-header #brand-home:not(.has-notif),
html[data-power-accent="mint"] .power-console-header .power-brand:not(.has-notif),
html.accent-skin-mint .power-console-header .power-brand:not(.has-notif) {
  border-color: #00f5d4 !important;
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.5), inset 0 0 12px rgba(0, 245, 212, 0.3) !important;
  animation: mintBatteryPlasma 4s ease-in-out infinite alternate !important;
}

@keyframes mintBatteryPlasma {
  0% {
    filter: drop-shadow(0 0 10px #00f5d4) drop-shadow(0 0 20px rgba(16, 185, 129, 0.6));
    transform: scale(1) rotate(0deg);
  }
  50% {
    filter: drop-shadow(0 0 25px #00f5d4) drop-shadow(0 0 35px #a7f3d0) brightness(1.35);
    transform: scale(1.07) rotate(2deg);
  }
  100% {
    filter: drop-shadow(0 0 15px #10b981) drop-shadow(0 0 28px #00f5d4) brightness(1.15);
    transform: scale(1.02) rotate(-2deg);
  }
}

/* Anillo cónico fluido: ::before = aro exterior; ::after = aro hueco (no tapa el logo) */
html[data-power-accent="mint"] .power-console-header #brand-home::before,
html[data-power-accent="menta"] .power-console-header #brand-home::before,
html.accent-skin-mint .power-console-header #brand-home::before,
html.accent-skin-menta .power-console-header #brand-home::before,
html[data-power-accent="mint"] .power-console-header .power-brand::before,
html.accent-skin-mint .power-console-header .power-brand::before {
  content: "" !important;
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  padding: 2px;
  background: conic-gradient(from 0deg, #00f5d4, #10b981, #a7f3d0, #00f5d4) !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;
  animation: mintRingSpin 2.5s linear infinite !important;
  opacity: 0.9 !important;
  pointer-events: none;
  z-index: 0;
}

html[data-power-accent="mint"] .power-console-header #brand-home::after,
html[data-power-accent="menta"] .power-console-header #brand-home::after,
html.accent-skin-mint .power-console-header #brand-home::after,
html.accent-skin-menta .power-console-header #brand-home::after,
html[data-power-accent="mint"] .power-console-header .power-brand::after,
html.accent-skin-mint .power-console-header .power-brand::after {
  background: conic-gradient(from 180deg, #00f5d4, #10b981, #a7f3d0, #00f5d4) !important;
  animation: mintRingSpin 2.5s linear infinite reverse !important;
  opacity: 0.9 !important;
}

@keyframes mintRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="mint"] body.power-hud::before,
  html[data-power-accent="menta"] body.power-hud::before,
  html.accent-skin-mint body.power-hud::before,
  html.accent-skin-menta body.power-hud::before,
  html[data-power-accent="mint"] body.power-hud::after,
  html[data-power-accent="menta"] body.power-hud::after,
  html.accent-skin-mint body.power-hud::after,
  html.accent-skin-menta body.power-hud::after,
  html[data-power-accent="mint"] .power-console-header #brand-home,
  html[data-power-accent="menta"] .power-console-header #brand-home,
  html.accent-skin-mint .power-console-header #brand-home,
  html.accent-skin-menta .power-console-header #brand-home,
  html[data-power-accent="mint"] .power-console-header #brand-home::before,
  html[data-power-accent="menta"] .power-console-header #brand-home::before,
  html.accent-skin-mint .power-console-header #brand-home::before,
  html.accent-skin-menta .power-console-header #brand-home::before,
  html[data-power-accent="mint"] .power-console-header #brand-home::after,
  html[data-power-accent="menta"] .power-console-header #brand-home::after,
  html.accent-skin-mint .power-console-header #brand-home::after,
  html.accent-skin-menta .power-console-header #brand-home::after {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
}

/* ==========================================================================
   POWER COMPANIONS — ULTRA-KAWAII TÁCTIL
   ========================================================================== */

.companion-stage,
#power-companion-box.companion-stage {
  background: rgba(18, 14, 22, 0.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--power-border) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.pf-hero,
section.pf-hero {
  position: relative !important;
  overflow: visible !important;
}

.pet-hero-playground {
  position: absolute !important;
  bottom: 8px !important;
  left: 20px !important;
  right: 20px !important;
  height: 48px !important;
  pointer-events: none !important;
  z-index: 15 !important;
  overflow: visible !important;
}

#pet-hero-playground #pet-floating-particles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  overflow: visible;
}

.mini-pet-actor {
  position: absolute !important;
  bottom: 0 !important;
  left: 8%;
  width: 38px !important;
  height: 38px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  --pet-dir: 1;
  transition: left 1.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)) !important;
}

.mini-pet-actor svg {
  width: 38px;
  height: 38px;
  display: block;
  image-rendering: pixelated;
}

.mini-pet-actor.is-walking {
  animation: petWaddleWalk 0.35s infinite alternate ease-in-out !important;
}

@keyframes petWaddleWalk {
  0% { transform: translateY(0px) rotate(-6deg) scaleX(var(--pet-dir, 1)); }
  100% { transform: translateY(-3px) rotate(6deg) scaleX(var(--pet-dir, 1)); }
}

.mini-pet-actor.is-idle {
  animation: petChibiBreathe 2s infinite alternate ease-in-out !important;
}

@keyframes petChibiBreathe {
  0% { transform: scaleX(var(--pet-dir, 1)) scale(1, 1); }
  100% { transform: scaleX(var(--pet-dir, 1)) scale(1.06, 0.94); }
}

.mini-pet-actor.is-jumping {
  animation: petMiniJump 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes petMiniJump {
  0% { transform: scaleX(var(--pet-dir, 1)) translateY(0); }
  40% { transform: scaleX(var(--pet-dir, 1)) translateY(-14px) scale(0.96, 1.08); }
  100% { transform: scaleX(var(--pet-dir, 1)) translateY(0); }
}

.mini-pet-actor::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 6px !important;
  right: 6px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.35) !important;
  filter: blur(1px) !important;
}

.companion-compact-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  gap: 12px;
}

.companion-label-mini {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--power-accent);
}

.companion-toggles-mini {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-pet-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-pet-icon[data-pet="pinguino"]::before { content: "🐧"; }
.btn-pet-icon[data-pet="pollita"]::before { content: "🐥"; }

.btn-pet-icon.active {
  background: var(--power-accent-soft) !important;
  border-color: var(--power-accent) !important;
  box-shadow: 0 0 10px var(--power-accent-soft) !important;
}

.companion-coins-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: var(--power-accent);
  font-variant-numeric: tabular-nums;
}

.companion-mascot-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 16px;
}

/* RONDA 10 · Bloque 0 — Regla legacy de la era "kawaii compacta" (altura fija
   135px) que colisionaba en cascada contra la altura por viewport que definía
   perfil.html para #power-companion-box (causa raíz identificada del reporte
   de "caja negra"). Se despoja del selector vivo y se deja namespaced/inerte
   para no volver a machacar el hábitat 2D actual. RONDA · Reconstrucción
   geométrica S24 Ultra: perfil.html ya no usa una altura por viewport en
   absoluto — la geometría es aspect-ratio:19.5/9 fijo + height:auto, igual en
   todos los dispositivos; esta nota queda como ancla histórica. */
.legacy-companion-box-135 {
  position: relative;
  overflow: hidden;
  height: 135px;
  min-height: 135px;
  max-height: 135px;
  padding: 0;
}

#power-penguin-gif {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  position: absolute;
  bottom: 0;
  left: 0;
  object-fit: contain;
  object-position: bottom center;
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.18s ease;
  transform-origin: bottom center;
  z-index: 3;
  --pet-x: 0px;
  --pet-dir: 1;
}

.power-penguin-gif {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

#power-penguin-gif.is-reacting {
  transition: none;
  animation: petBoxBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.power-penguin-gif.is-reacting {
  animation: petGifBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes petGifBounce {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-8px) scale(1.08, 0.94); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes petBoxBounce {
  0% { transform: translateX(var(--pet-x, 0px)) scaleX(1) translateY(0) scale(1); }
  40% { transform: translateX(var(--pet-x, 0px)) scaleX(1) translateY(-12px) scale(1.08, 0.94); }
  100% { transform: translateX(var(--pet-x, 0px)) scaleX(1) translateY(0) scale(1); }
}

.mini-pet-actor .power-penguin-gif {
  width: 38px;
  height: 38px;
}

.companion-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.companion-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--power-accent);
}

.companion-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.pet-bond-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.heart-icon {
  width: 10px;
  height: 10px;
  background: #f43f5e;
  transform: rotate(45deg);
  box-shadow: -3px 0 0 #f43f5e, 0 -3px 0 #f43f5e;
  flex-shrink: 0;
}

.pet-bond-track {
  width: 70px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 99px;
  overflow: hidden;
}

.pet-bond-fill {
  height: 100%;
  background: linear-gradient(90deg, #ec4899, #f43f5e);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.companion-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-pet-toggle {
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--power-text-muted, #94a3b8);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-pet-toggle.active {
  background: var(--power-accent) !important;
  color: #041410 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.companion-display {
  position: relative;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.companion-aura {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.companion-sprite {
  width: 104px;
  height: 104px;
  margin: 12px auto 4px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  position: relative;
  z-index: 1;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}

.companion-sprite:hover .pixel-art-svg {
  transform: scale(1.08) translateY(-4px);
}

.companion-sprite:focus-visible {
  box-shadow: 0 0 0 3px var(--power-accent-soft);
  border-radius: 16px;
}

.pixel-art-svg {
  width: 104px !important;
  height: 104px !important;
  image-rendering: pixelated !important;
  cursor: pointer !important;
  display: block;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  animation: petLivingIdle 2.2s ease-in-out infinite !important;
}

.companion-sprite.is-squished .pixel-art-svg {
  animation: none !important;
  transform: translateY(6px) scale(1.22, 0.78) !important;
}

.pet-ground-shadow {
  width: 72px;
  height: 10px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(2px);
  pointer-events: none;
}

#pet-floating-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.pet-float-bit {
  position: absolute;
  font-size: 12px;
  pointer-events: none;
  animation: petFloatUp 0.9s ease-out forwards;
}

.floating-heart {
  position: absolute;
  font-size: 1.25rem;
  pointer-events: none;
  animation: floatHeartAnim 1s ease-out forwards;
  z-index: 10;
  color: #f43f5e;
  line-height: 1;
}

@keyframes petLivingIdle {
  0%, 100% { transform: translateY(0px) scale(1, 1); }
  25% { transform: translateY(-6px) scale(0.97, 1.03); }
  50% { transform: translateY(0px) scale(1.02, 0.98); }
  75% { transform: translateY(-2px) scale(0.99, 1.01); }
}

@keyframes floatHeartAnim {
  0% { opacity: 1; transform: translate(0, 0) scale(0.6); }
  50% { opacity: 1; transform: translate(var(--rx, 0px), -35px) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--rx, 0px), -65px) scale(0.9); }
}

@keyframes petFloatUp {
  0% { opacity: 1; transform: translate(-50%, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(-50%, -56px) scale(1.15); }
}

.companion-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  text-align: left;
  flex-wrap: wrap;
}

.companion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.companion-info strong {
  color: #fff;
  font-size: 0.95rem;
}

.companion-info small {
  color: var(--power-text-muted, #94a3b8);
  font-size: 0.75rem;
}

.companion-coins {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.companion-coins .coin-icon {
  font-size: 0.85rem;
}

#power-coins-balance {
  font-weight: 800;
  color: var(--power-accent);
  font-variant-numeric: tabular-nums;
}

.companion-coins small {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--power-text-muted, #94a3b8);
}

.companion-sprite.pet-pinguino #sprite-pinguino { display: block; }
.companion-sprite.pet-pinguino #sprite-pollita { display: none !important; }
.companion-sprite.pet-pollita #sprite-pollita { display: block; }
.companion-sprite.pet-pollita #sprite-pinguino { display: none !important; }

@keyframes petIdleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes petMintGlow {
  0% { opacity: 0.55; transform: scale(0.92); filter: hue-rotate(0deg); }
  100% { opacity: 1; transform: scale(1.08); filter: hue-rotate(12deg); }
}

@keyframes petCafeGlow {
  0% { opacity: 0.45; transform: scale(0.94); }
  100% { opacity: 0.95; transform: scale(1.06); }
}

@keyframes petPlasmaGlow {
  0% { opacity: 0.5; transform: scale(0.9); filter: hue-rotate(0deg); }
  100% { opacity: 1; transform: scale(1.12); filter: hue-rotate(25deg); }
}

@keyframes petPowerGlow {
  0% { opacity: 0.5; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1.1); }
}

html[data-power-accent="mint"] .companion-aura,
html.accent-skin-mint .companion-aura {
  background: radial-gradient(circle, rgba(0, 245, 212, 0.35) 0%, transparent 70%);
  animation: petMintGlow 3s infinite alternate;
}

html[data-power-accent="cafe-con-leche"] .companion-aura,
html.accent-skin-cafe-con-leche .companion-aura {
  background: radial-gradient(circle, rgba(230, 184, 125, 0.35) 0%, transparent 70%);
  animation: petCafeGlow 4s infinite alternate;
}

html[data-power-accent="plasma"] .companion-aura,
html.accent-skin-plasma .companion-aura {
  background: radial-gradient(circle, rgba(217, 70, 239, 0.35) 0%, transparent 70%);
  animation: petPlasmaGlow 2s infinite alternate;
}

html[data-power-accent="power"] .companion-aura,
html:not([data-power-accent]) .companion-aura,
html.accent-skin-power .companion-aura {
  background: radial-gradient(circle, rgba(255, 59, 48, 0.35) 0%, transparent 70%);
  animation: petPowerGlow 2.5s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .companion-sprite,
  .companion-aura,
  .pixel-art-svg,
  .companion-sprite.is-squished .pixel-art-svg,
  .pet-float-bit,
  .floating-heart,
  .mini-pet-actor,
  .mini-pet-actor.is-walking,
  .mini-pet-actor.is-idle,
  .mini-pet-actor.is-jumping {
    animation: none !important;
    transform: none !important;
    filter: none;
  }
  .mini-pet-actor {
    transition: none !important;
  }
  .power-penguin-gif.is-reacting,
  #power-penguin-gif.is-reacting {
    animation: none !important;
  }
  #power-penguin-gif {
    transition: none !important;
  }
}

/* ============================================================================
 * PowerAdmin — Sistema visual "Triple-A" (Hextech / Challenger Architecture)
 * ----------------------------------------------------------------------------
 * Capa aditiva de tokens + utilidades. NO reemplaza el sistema --power-*
 * existente (skins de acento, paneles, etc.) — convive con él. Se aplica de
 * forma selectiva sobre superficies clave (headers, cards, modales, botones
 * primarios) vía clases .pw-hextech-*. Pensado para PWA: unidades fluidas
 * (clamp()) y 100dvh para que no haya cortes visuales entre móvil y desktop.
 * ========================================================================== */
:root {
  /* Acentos de energía Hextech */
  --pw-mana: #00f0ff;              /* Azul Maná/Cian — actividad de alumnos */
  --pw-mana-soft: rgba(0, 240, 255, 0.14);
  --pw-mana-glow: rgba(0, 240, 255, 0.35);
  --pw-hextech-gold: #c8aa6e;      /* Oro Hextech — economía y rangos */
  --pw-hextech-gold-bright: #f59e0b;
  --pw-gold-bevel: rgba(200, 170, 110, 0.3);   /* bisel metálico */
  --pw-gold-bevel-soft: rgba(200, 170, 110, 0.14);
  --pw-emerald: #10b981;           /* confirmaciones al día */
  --pw-emerald-soft: rgba(16, 185, 129, 0.16);
  --pw-crimson: #ef4444;           /* alertas / PowerAdmin */
  --pw-crimson-soft: rgba(239, 68, 68, 0.16);
  /* Superficie de cristal obsidiana */
  --pw-obsidian: rgba(9, 9, 11, 0.9);
  --pw-obsidian-2: rgba(9, 9, 11, 0.72);
}

/* ---------- Superficies: cristal obsidiana + bisel dorado ---------- */
.pw-hextech-surface {
  background: var(--pw-obsidian);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--pw-gold-bevel);
  border-radius: var(--power-radius, 1.35rem);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.5) inset,
    0 18px 40px -12px rgba(0, 0, 0, 0.65);
}

.pw-hextech-card {
  background: var(--pw-obsidian-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--pw-gold-bevel-soft);
  border-radius: var(--power-radius-sm, 1rem);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
    0 10px 24px -10px rgba(0, 0, 0, 0.55);
  transition: border-color 0.2s var(--power-ease, ease), box-shadow 0.2s var(--power-ease, ease), transform 0.2s var(--power-ease, ease);
}
.pw-hextech-card:hover {
  border-color: var(--pw-gold-bevel);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 30px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--pw-gold-bevel-soft);
}

/* Botón primario estilo Hextech (borde dorado, relleno sutil) */
.pw-hextech-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--pw-gold-bevel);
  background: linear-gradient(180deg, rgba(200, 170, 110, 0.16), rgba(200, 170, 110, 0.05));
  color: #f4e9d0;
  border-radius: 0.75rem;
  padding: 0.55rem 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pw-hextech-btn:hover { filter: brightness(1.15); box-shadow: 0 0 0 1px var(--pw-gold-bevel), 0 0 18px -4px var(--pw-hextech-gold-bright); }
.pw-hextech-btn:active { transform: translateY(1px); }
.pw-hextech-btn:disabled { opacity: 0.5; filter: none; box-shadow: none; cursor: not-allowed; }

/* Chips de estado por color de energía */
.pw-chip-mana { color: var(--pw-mana); background: var(--pw-mana-soft); border: 1px solid rgba(0, 240, 255, 0.3); }
.pw-chip-gold { color: var(--pw-hextech-gold-bright); background: var(--pw-gold-bevel-soft); border: 1px solid var(--pw-gold-bevel); }
.pw-chip-emerald { color: var(--pw-emerald); background: var(--pw-emerald-soft); border: 1px solid rgba(16, 185, 129, 0.35); }
.pw-chip-crimson { color: var(--pw-crimson); background: var(--pw-crimson-soft); border: 1px solid rgba(239, 68, 68, 0.35); }
.pw-chip-mana, .pw-chip-gold, .pw-chip-emerald, .pw-chip-crimson {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700;
}

/* ============================================================================
 * PURGA GLOBAL DEL ACABADO PLANO ("Hextech Arcade" — AGENTS.md §3 prohíbe
 * bg-zinc-900/800 genéricos en todo el ecosistema).
 * ----------------------------------------------------------------------------
 * .pw-hextech-surface/-card de arriba existían pero NUNCA se habían aplicado
 * en el markup real de dashboard/perfil/cursos/agenda/alumnos.html — en vez
 * de agregar la clase a cada tarjeta una por una en las 5 páginas (cientos de
 * instancias), se redefine aquí el TRATAMIENTO VISUAL de las utilidades de
 * Tailwind que esas páginas ya usan como fondo de tarjeta/panel, reutilizando
 * los mismos tokens --pw-obsidian/--pw-gold-bevel. Esto purga el plano en las
 * 5 páginas (y cualquier otra que use estas mismas clases) de una sola vez,
 * de forma centralizada y sin tocar el HTML.
 * !important: el Tailwind Play CDN reinyecta reglas en su propio <style>
 * cuando detecta clases nuevas en nodos que el JS agrega después del load;
 * aunque el <link> de power-ui.css carga después del <script> del CDN en las
 * 5 páginas (mismo orden de origen que ya nos favorece), !important evita
 * depender de ese timing — mismo patrón ya usado en .pw-dvh más abajo.
 * ========================================================================== */
/* Ronda "Viewport Lock" — FIX CRÍTICO: esta purga estaba escribiendo
 * backdrop-filter en <body> cada vez que body llevaba bg-zinc-950 (el caso
 * de casi TODAS las páginas: <body class="bg-zinc-950 ..."> es el patrón
 * estándar del proyecto). backdrop-filter en un ancestro — igual que
 * transform/filter/perspective/contain/will-change — crea un NUEVO
 * "containing block" para los descendientes position:fixed (spec CSS
 * Filter Effects). Resultado real y reproducible: TODOS los modales
 * [id$="-modal"]/.pw-overlay (position:fixed;inset:0) dejaban de anclarse
 * al viewport visible y pasaban a anclarse al <body> completo (tan alto
 * como el documento entero, p.ej. 3000px en una página larga) — el modal
 * se "centraba" dentro de esa caja gigante en vez del viewport, quedando
 * visualmente desplazado hacia abajo y exigiendo scroll para verlo. Este
 * era el mecanismo real detrás del reporte "los modales aparecen
 * desplazados hacia abajo" en prácticamente toda la app (verificado
 * empíricamente con Playwright: el fix de una sola línea de abajo —
 * excluir <body>/<html> de esta purga — restaura el anclaje correcto en
 * dashboard/perfil/registrar-pago/cursos/agenda/asistencia/login/
 * calendario/pago-profes/tcg-conciliacion). La purga de acabado plano
 * sigue aplicando igual a tarjetas/paneles reales (su intención original,
 * ver comentario de arriba); solo se excluye el elemento raíz del documento. */
:where(
  .bg-zinc-900, .bg-zinc-950, .bg-zinc-800, .bg-zinc-700,
  .bg-zinc-900\/95, .bg-zinc-900\/90, .bg-zinc-900\/70, .bg-zinc-900\/40,
  .bg-zinc-950\/95, .bg-zinc-950\/90, .bg-zinc-950\/80, .bg-zinc-950\/70, .bg-zinc-950\/60,
  .bg-zinc-800\/90, .bg-zinc-800\/80
):not(body):not(html) {
  background-color: transparent !important;
  background-image: radial-gradient(135deg, rgba(22, 27, 46, 0.96) 0%, rgba(8, 10, 16, 0.98) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.8) !important;
}
:where(
  .border-zinc-800, .border-zinc-700, .border-zinc-600,
  .border-zinc-800\/80
) {
  border-color: rgba(200, 170, 110, 0.4) !important;
}
@media (prefers-reduced-transparency: reduce) {
  :where(.bg-zinc-900, .bg-zinc-950, .bg-zinc-800, .bg-zinc-700) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================================================
 * RONDA 9 — Bloque 1: Tipografías "Hextech K-Pop Arcade"
 * Orbitron (display/mono táctico) para títulos, encabezados y rangos;
 * Rajdhani (sans táctico) para métricas, números y botones tácticos. El
 * <link> de Google Fonts va en el <head> de cada HTML (dashboard/perfil/
 * alumnos/cursos/agenda/login) — acá solo la aplicación de font-family.
 * ========================================================================== */
h1, h2, h3,
.power-label,
.pw-fluid-h1, .pw-fluid-h2,
.quest-badge-enrolled, .quest-badge-locked,
.pw-rank-badge, .pw-photocard-rank,
.brand-power, .brand-charging {
  font-family: 'Orbitron', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
button, .power-cta, .ops-dock-btn, .power-nav-slot,
.power-score, .quest-coins, .ag-rsvp-btn,
input, select, textarea {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Badge "✨ RECIENTE // NUEVO" (alumnos.html, Photocard) ----------
 * Alumno con Fecha_Ingreso <= 30 días. Mismo formato que el resto de badges
 * de .rpg-badges (pill chico), pero con borde ámbar/dorado y brillo emisivo
 * sutil para que resalte como insignia táctica. */
.badge-reciente {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Orbitron', 'Rajdhani', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
  white-space: nowrap;
}

/* ---------- Botones tácticos: relieve 3D real con press físico ---------- */
.ops-dock-btn,
.power-cta,
.pw-hextech-btn {
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease, border-color 0.15s ease;
}
.ops-dock-btn:active,
.power-cta:active,
.pw-hextech-btn:active {
  transform: translateY(2px);
  box-shadow: none !important;
  border-bottom-width: 1px;
}

/* ---------- Tipografía y ergonomía fluida (móvil PWA ↔ desktop) ---------- */
.pw-fluid-h1 { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.25rem); line-height: 1.15; }
.pw-fluid-h2 { font-size: clamp(1.05rem, 0.85rem + 1vw, 1.5rem); line-height: 1.2; }
.pw-fluid-body { font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem); }
.pw-dvh { min-height: 100dvh !important; } /* !important: refina Tailwind .min-h-screen (100vh) sin depender del orden de carga del CDN */
.pw-dvh-max { max-height: 100dvh; }

/* ============================================================================
 * Game-Card Receipt — "PASE OFICIAL" (Bloque 4)
 * Recibo coleccionable: marco de carta + sello fiscal inferior.
 * ========================================================================== */
.pw-game-card {
  --gc-w: min(360px, 92vw);
  width: var(--gc-w);
  border-radius: 1.25rem;
  padding: 3px;
  background: linear-gradient(160deg, var(--pw-hextech-gold), rgba(200, 170, 110, 0.25) 30%, rgba(200, 170, 110, 0.15) 70%, var(--pw-hextech-gold));
  box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.pw-game-card__inner {
  border-radius: calc(1.25rem - 3px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200, 170, 110, 0.12), transparent 60%),
    var(--pw-obsidian);
  padding: 1rem 1.1rem 1.1rem;
  position: relative;
  overflow: hidden;
}
.pw-game-card__header {
  text-align: center;
  padding-bottom: 0.65rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--pw-gold-bevel-soft);
}
.pw-game-card__brand {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pw-hextech-gold);
  font-weight: 800;
}
.pw-game-card__title {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 900;
  color: #f4e9d0;
  letter-spacing: 0.02em;
}
.pw-game-card__avatar-wrap {
  width: 68px; height: 68px;
  border-radius: 999px;
  margin: 0 auto 0.5rem;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(200, 170, 110, 0.18), transparent 70%);
  border: 2px solid var(--pw-gold-bevel);
  overflow: hidden;
}
.pw-game-card__body { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.pw-game-card__row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem; }
.pw-game-card__row-label { color: #a1a1aa; }
.pw-game-card__row-value { color: #f4f4f5; font-weight: 700; text-align: right; }
.pw-game-card__seal {
  border-top: 1px dashed var(--pw-gold-bevel);
  padding-top: 0.65rem;
  margin-top: 0.25rem;
}
.pw-game-card__seal-row { display: flex; justify-content: space-between; font-size: 0.72rem; color: #d4d4d8; padding: 0.1rem 0; }
.pw-game-card__seal-total { font-size: 1rem; font-weight: 900; color: var(--pw-hextech-gold-bright); }
.pw-game-card__clave {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.02em;
  color: #71717a;
  word-break: break-all;
  margin-top: 0.4rem;
  text-align: center;
}
.pw-game-card__actions { display: flex; gap: 0.5rem; margin-top: 0.85rem; }
.pw-game-card__actions .pw-hextech-btn { flex: 1; justify-content: center; font-size: 0.78rem; }
.pw-wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.7rem 1rem; border-radius: 0.9rem;
  background: linear-gradient(180deg, #25d366, #1fb655);
  color: #06210f; font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 10px 24px -10px rgba(37, 211, 102, 0.55);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.pw-wa-btn:hover { filter: brightness(1.08); }
.pw-wa-btn:active { transform: translateY(1px); }

/* ==========================================================================
   Ronda POWER LINK — Carta coleccionable estilo Magic/TCG pack-opening.
   .pw-tcg-card se SUMA a .pw-game-card (no lo reemplaza): hereda el marco
   dorado base y sigue siendo ubicable por '.pw-game-card' (avanzar()),
   mientras estas reglas le montan encima el skin carmesí/dorado Cyber-Glass,
   la gema de monto y la caja de motivo tipo terminal.
   ========================================================================== */
.pw-tcg-card {
  position: relative;
  background: linear-gradient(160deg, #f59e0b, #7a1014 32%, #2b0508 68%, #f59e0b);
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 34px -10px rgba(255, 30, 39, 0.4);
  overflow: hidden;
}
.pw-tcg-card__inner {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 30, 39, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(24, 9, 10, 0.94), var(--pw-obsidian));
}
/* Gema de Monto (Power Crystal) — hexágono neón, esquina superior derecha */
.pw-tcg-card__gem {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #fff5e0;
  background: linear-gradient(145deg, #ff1e27, #7a0d12);
  clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  box-shadow:
    0 0 0 1px var(--pw-hextech-gold, #c8aa6e),
    0 0 18px -2px rgba(255, 30, 39, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pw-tcg-card__brand { color: var(--pw-hextech-gold-bright, #f59e0b); }
/* Fila de Identidad — nombre del pagador (o Motivo si el pagador es
   teléfono/código genérico, ver identidadVisible() en tcg-conciliacion.js) */
.pw-tcg-card__identidad {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: 0.01em;
  margin: 0.35rem 0 0.6rem;
  text-shadow: 0 0 14px rgba(255, 30, 39, 0.35);
}
/* Fila de Telemetría — fecha táctica DD/MM/YYYY • HH:MM + referencia,
   tipografía monoespaciada */
.pw-tcg-card__telemetria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  color: #d4d4d8;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px dashed var(--pw-gold-bevel, rgba(200, 170, 110, 0.3));
}
.pw-tcg-card__tele-fecha,
.pw-tcg-card__tele-ref { display: inline-flex; align-items: center; gap: 0.35rem; }
/* Caja de Motivo — "Mensaje del Remitente", estética de terminal/pergamino
   digital */
.pw-tcg-card__motivo {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--pw-gold-bevel-soft, rgba(200, 170, 110, 0.18));
  border-radius: 0.65rem;
  padding: 0.55rem 0.7rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: #fcd34d;
  line-height: 1.4;
  word-break: break-word;
}
.pw-tcg-card__motivo-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--pw-hextech-gold, #c8aa6e);
  margin-bottom: 0.2rem;
}
/* Holo-flare — destello diagonal que cruza la carta al revelarse (estado
   base aquí; el disparo/temporización de la animación vive en
   tcg-conciliacion.html, junto al resto de la revelación 3D) */
.pw-tcg-card__flare {
  position: absolute;
  inset: -20% -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.7) 49%, rgba(245, 158, 11, 0.55) 53%, transparent 62%);
  transform: translateX(-140%) skewX(-12deg);
  opacity: 0;
  mix-blend-mode: screen;
}

/* ==========================================================================
   Ronda 26 · Mesa TCG — Visor Holográfico de Pistas (Tactical Scanner HUD).
   Cyber-Glass oscuro + bisel dorado Hextech, reutiliza --pw-obsidian /
   --pw-hextech-gold* / --pw-gold-bevel* (definidos arriba, sección Hextech).
   ========================================================================== */
.tcg-visor {
  width: 100%;
  max-width: 460px;
  border-radius: 1.1rem;
  padding: 0.9rem 1rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(24,24,27,0.92), rgba(9,9,11,0.94)),
    var(--pw-obsidian);
  border: 1px solid var(--pw-gold-bevel, rgba(200,170,110,0.35));
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 18px 40px -20px rgba(0,0,0,0.7),
    0 0 22px -10px rgba(200,170,110,0.35);
  backdrop-filter: blur(12px);
}
.tcg-visor-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  padding-bottom: 0.4rem; margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--pw-gold-bevel-soft, rgba(200,170,110,0.18));
}
.tcg-visor-header--matrix { margin-top: 0.75rem; }
.tcg-visor-titulo {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pw-hextech-gold-bright, #f59e0b);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.tcg-visor-sub { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #71717a; }
.tcg-visor-body { display: flex; flex-direction: column; gap: 0.5rem; }

/* Telemetry Feed: micro-píldoras neón */
.tcg-visor-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tcg-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.28rem 0.6rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.tcg-pill--gold { color: var(--pw-hextech-gold-bright, #f59e0b); background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
.tcg-pill--cyan { color: #67e8f9; background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.3); }
.tcg-pill--violet { color: #d8b4fe; background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.32); }
.tcg-pill--warn {
  color: #fca5a5; background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4);
  animation: tcgPillWarnPulse 1.4s ease-in-out infinite;
}
@keyframes tcgPillWarnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.35); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.tcg-visor-motivo { font-size: 0.68rem; color: #a1a1aa; line-height: 1.4; }
.tcg-visor-motivo mark {
  background: rgba(217,70,239,0.16); color: #f0abfc;
  padding: 0.05rem 0.35rem; border-radius: 0.4rem; font-weight: 700;
}
.tcg-visor-warn {
  font-size: 0.68rem; font-weight: 800; color: #fca5a5;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.4);
  border-radius: 0.6rem; padding: 0.4rem 0.6rem;
}

/* Match Matrix: insignias por candidato */
.tcg-match-matrix { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.tcg-match-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.62rem; font-weight: 700;
  padding: 0.22rem 0.5rem; border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #d4d4d8;
}
.tcg-match-badge b { font-weight: 900; }
.tcg-match-badge--motivo { border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.08); color: #a5f3fc; }
.tcg-match-badge--motivo b { color: #67e8f9; }
.tcg-match-badge--apellido { border-color: rgba(168,85,247,0.35); background: rgba(168,85,247,0.08); color: #e9d5ff; }
.tcg-match-badge--apellido b { color: #d8b4fe; }
.tcg-match-badge--tarifa { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); color: #fde68a; }
.tcg-match-badge--tarifa b { color: var(--pw-hextech-gold-bright, #f59e0b); }
.tcg-match-badge--memoria { border-color: rgba(217,70,239,0.35); background: rgba(217,70,239,0.08); color: #f5d0fe; }
.tcg-match-badge--memoria b { color: #f0abfc; }
.tcg-match-badge--nombre_completo { border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.14); color: #fde68a; box-shadow: 0 0 10px rgba(245,158,11,0.28); }
.tcg-match-badge--nombre_completo b { color: #fbbf24; }
.tcg-match-badge--deuda { border-color: rgba(251,191,36,0.35); background: rgba(245,158,11,0.08); color: #fcd34d; }
.tcg-match-badge--deuda b { color: #fbbf24; }
.tcg-match-badge--vacio { color: #71717a; font-style: italic; font-weight: 500; }

/* Insignia de Afinidad Gamer: S/A/B-RANK + barra de pulso */
.tcg-rank-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; min-width: 4.6rem; }
.tcg-rank-badge {
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem; border-radius: 0.4rem;
}
.tcg-rank-wrap--S .tcg-rank-badge {
  color: #fef3c7; background: linear-gradient(90deg, #f59e0b, #d946ef);
  box-shadow: 0 0 12px -2px rgba(245,158,11,0.7);
}
.tcg-rank-wrap--A .tcg-rank-badge { color: #67e8f9; background: rgba(34,211,238,0.14); border: 1px solid rgba(34,211,238,0.4); }
.tcg-rank-wrap--B .tcg-rank-badge { color: #a1a1aa; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.tcg-rank-bar { width: 4.6rem; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tcg-rank-bar__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, var(--pw-hextech-gold-bright, #f59e0b), #d946ef);
  animation: tcgRankBarPulse 1.8s ease-in-out infinite;
}
@keyframes tcgRankBarPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }

/* Ronda 26 · Punto 3 — sello de recompensa al conciliar */
.tcg-carta-wrap .pw-game-card.tcg-sellada { position: relative; }
.tcg-sello-conciliado {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.04em;
  color: #052e16; background: linear-gradient(135deg, #6ee7b7, #22c55e);
  padding: 0.32rem 0.65rem; border-radius: 999px;
  box-shadow: 0 0 18px -3px rgba(34,197,94,0.75), 0 4px 10px -4px rgba(0,0,0,0.5);
  transform: rotate(-4deg);
  animation: tcgSelloPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tcgSelloPop {
  from { transform: scale(0.4) rotate(-4deg); opacity: 0; }
  to { transform: scale(1) rotate(-4deg); opacity: 1; }
}

/* Ronda 26 · Punto 3 — rebote (pulse scale) del contador de mazo restante */
.tcg-contador-pulse { animation: tcgContadorPulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tcgContadorPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   Widget de Mascota (?view=widget) + visor inmersivo .pw-habitat-fullscreen
   ========================================================================== */
.pw-habitat-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* RONDA · Reconstrucción geométrica S24 Ultra — encuadre limpio en fullscreen
   (contain, no cover): en PC panorámico deja bordes negros cinematográficos
   a los lados sin recortar duela/mascota; en móvil horizontal cubre todo el
   display. max-width:none anula el tope de 620px del modo normal (ver
   perfil.html). NOTA: perfil.html define su PROPIA copia de esta regla en un
   <style> inline que carga después de este archivo — a igualdad de
   especificidad esa gana en la página de perfil; esta copia queda vigente
   para el resto de contextos (widget ?view=widget, futuras páginas). */
#power-companion-box.pw-habitat-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background-color: #000000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
}

.pet-widget-exit {
  display: none;
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top));
  right: max(0.7rem, env(safe-area-inset-right));
  /* Por encima del habitat en fullscreen (z-index 999999, ver
     #power-companion-box.pw-habitat-fullscreen arriba) para no quedar tapado. */
  z-index: 1000000;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.82);
  border: 1px solid rgba(200, 170, 110, 0.45);
  color: #fde68a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px rgba(200, 170, 110, 0.18);
}
html.pw-pet-widget .pet-widget-exit,
body.pw-pet-widget .pet-widget-exit {
  display: inline-flex !important;
}

html.pw-pet-widget,
html.pw-pet-widget body {
  background: #050506;
  min-height: 100dvh;
  overflow: hidden;
}
html.pw-pet-widget .power-console-header,
html.pw-pet-widget #power-main-nav,
html.pw-pet-widget #power-header-tools,
html.pw-pet-widget #power-accent-fx {
  display: none !important;
}
html.pw-pet-widget main.perfil-page {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0, 0, 0, 0.2), #050506 72%);
}
html.pw-pet-widget main.perfil-page > *:not(#personalizacion-hotbar-section) {
  display: none !important;
}
html.pw-pet-widget #personalizacion-hotbar-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: min(100vw - 1.25rem, 640px);
}
html.pw-pet-widget #personalizacion-hotbar-section > .pf-section-head,
html.pw-pet-widget #personalizacion-hotbar-section > .hud-hotbar,
html.pw-pet-widget .hud-panel:not(#hud-panel-companero),
html.pw-pet-widget #companion-picker,
html.pw-pet-widget .hud-panel-side {
  display: none !important;
}
html.pw-pet-widget #hud-panels-area,
html.pw-pet-widget #hud-panel-companero,
html.pw-pet-widget #hud-panel-companero .hud-panel-inner {
  display: block !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.pw-pet-widget #power-companion-box {
  width: 100% !important;
  height: min(72dvh, 520px) !important;
  max-height: none !important;
  margin: 0 auto;
}
html.pw-pet-widget #power-companion-box.pw-habitat-fullscreen,
html.pw-pet-widget #power-companion-box.pet-fullscreen-active {
  width: 100vw !important;
  height: 100dvh !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 119 · LIMPIEZA VISUAL: POWER EJECUTIVA, NEÓN DEFINIDA, TACTO GLOBAL
 * ──────────────────────────────────────────────────────────────────────────
 * 1. POWER SIN REJILLA. Se borraron los cuatro bloques de líneas rojas que
 *    se apilaban sobre la skin por defecto (0.05, 0.08 ×2 y 0.18 con
 *    scanlines) y sus keyframes (gridPulsePower ×2, laserScanline,
 *    bgPulseCyber), que además animaban background-position: un repintado
 *    de pantalla completa por fotograma. Acá se apaga también la rejilla
 *    blanca base de `body.power-hud::before` SOLO para Power. Las demás
 *    skins conservan su textura. El perfil con FX «reactor» tiene su propia
 *    malla en power-skins.css y queda fuera (`:not([data-power-fx])`).
 * 2. POWER EJECUTIVA. Bisel de 1 px en acero, luz superior interna y
 *    jerarquía de botones: primario (CTA / pestaña activa) con bisel y
 *    glow, secundario en cristal, fantasma (navegación) casi sin caja.
 * 3. NEÓN DEFINIDA. El borde que latía animando box-shadow (repintado
 *    continuo, §6.1) pasa a un borde fijo de 1 px con glow en capas. El
 *    texto de lectura NO lleva glow: solo las cifras.
 * 4. TACTO GLOBAL (§6). Se usan las propiedades individuales `scale` y
 *    `translate`, que se COMPONEN con el `transform` que el botón ya tenga
 *    (p. ej. un translate(-50%) de centrado) en vez de pisarlo.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Power: obsidiana lisa ──────────────────────────────────────────── */
html:not([data-power-accent]):not([data-power-fx]) body.power-hud::before,
html[data-power-accent="power"]:not([data-power-fx]) body.power-hud::before,
html[data-power-accent="default"]:not([data-power-fx]) body.power-hud::before,
html.accent-skin-power:not([data-power-fx]) body.power-hud::before {
  background-image: none !important;
  animation: none !important;
}
html:not([data-power-accent]):not([data-power-fx]) body.power-hud::after,
html[data-power-accent="power"]:not([data-power-fx]) body.power-hud::after,
html[data-power-accent="default"]:not([data-power-fx]) body.power-hud::after,
html.accent-skin-power:not([data-power-fx]) body.power-hud::after {
  background:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(255, 59, 48, 0.10), transparent 62%),
    radial-gradient(ellipse 60% 45% at 100% 105%, rgba(148, 163, 184, 0.05), transparent 60%) !important;
  animation: none !important;
}

/* ── 2 · Power ejecutiva: bisel de acero y jerarquía ───────────────────────
 * Acero y carmesí, NO latón: la Ronda 64 dejó a Power sin una gota de
 * amarillo/dorado (tests/r64_power_sin_amarillo.mjs lo mide en pantalla). */
html:not([data-power-accent]) body.power-hud,
html[data-power-accent="power"] body.power-hud,
html.accent-skin-power body.power-hud {
  --pw119-bevel: rgba(228, 228, 231, 0.13);
  --pw119-bevel-hi: rgba(255, 120, 110, 0.55);
}
html:not([data-power-accent]) .power-stat-card,
html:not([data-power-accent]) .power-panel,
html:not([data-power-accent]) .power-card,
html[data-power-accent="power"] .power-stat-card,
html[data-power-accent="power"] .power-panel,
html[data-power-accent="power"] .power-card,
html.accent-skin-power .power-stat-card,
html.accent-skin-power .power-panel,
html.accent-skin-power .power-card {
  /* El borde IZQUIERDO no se toca: ahí vive el estado (is-ok / is-warn /
   * is-danger) de las tarjetas de matrícula. */
  border-top-color: var(--pw119-bevel) !important;
  border-right-color: var(--pw119-bevel) !important;
  border-bottom-color: var(--pw119-bevel) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 10px 28px -14px rgba(0, 0, 0, 0.85);
}
/* Rótulos de tarjeta: de gris apagado a marfil legible sobre obsidiana. */
html:not([data-power-accent]) .power-label,
html[data-power-accent="power"] .power-label,
html.accent-skin-power .power-label {
  color: #d6d3d1;
  letter-spacing: 0.08em;
}
/* Primario: CTA y pestaña activa, con bisel superior y glow carmesí. */
html:not([data-power-accent]) .power-cta,
html:not([data-power-accent]) .power-nav-slot.is-active,
html[data-power-accent="power"] .power-cta,
html[data-power-accent="power"] .power-nav-slot.is-active,
html.accent-skin-power .power-cta,
html.accent-skin-power .power-nav-slot.is-active {
  border: 1px solid var(--pw119-bevel-hi) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.30),
    0 0 14px rgba(255, 59, 48, 0.30);
}
/* Secundario: cristal ahumado con luz superior. */
html:not([data-power-accent]) .ops-dock-btn,
html:not([data-power-accent]) .power-btn,
html:not([data-power-accent]) .pw-btn,
html[data-power-accent="power"] .ops-dock-btn,
html[data-power-accent="power"] .power-btn,
html[data-power-accent="power"] .pw-btn,
html.accent-skin-power .ops-dock-btn,
html.accent-skin-power .power-btn,
html.accent-skin-power .pw-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 16px -10px rgba(0, 0, 0, 0.9);
}
/* Fantasma: la navegación no compite con la acción principal. */
html:not([data-power-accent]) .power-nav-slot:not(.is-active),
html[data-power-accent="power"] .power-nav-slot:not(.is-active),
html.accent-skin-power .power-nav-slot:not(.is-active) {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d4d4d8;
}

/* ── 3 · Neón: borde fijo, glow en capas, lectura limpia ───────────────── */
html[data-power-accent="neon"] .power-card,
html[data-power-accent="neon"] .pw-panel,
html[data-power-accent="neon"] .rpg-card,
html[data-power-accent="neon"] .company-rpg-card,
html[data-power-accent="neon"] .power-stat-card,
html[data-power-accent="neon"] .power-panel,
html.accent-skin-neon .power-card,
html.accent-skin-neon .pw-panel,
html.accent-skin-neon .rpg-card,
html.accent-skin-neon .company-rpg-card,
html.accent-skin-neon .power-stat-card,
html.accent-skin-neon .power-panel {
  animation: none !important;
  border-top-color: rgba(0, 255, 102, 0.50) !important;
  border-right-color: rgba(0, 255, 102, 0.50) !important;
  border-bottom-color: rgba(0, 255, 102, 0.50) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 102, 0.18),
    0 0 14px rgba(57, 255, 20, 0.22),
    0 0 36px -8px rgba(0, 255, 102, 0.18),
    inset 0 0 18px -10px rgba(0, 255, 102, 0.35);
}
html[data-power-accent="neon"] .power-cta,
html[data-power-accent="neon"] .power-nav-slot.is-active,
html.accent-skin-neon .power-cta,
html.accent-skin-neon .power-nav-slot.is-active {
  border: 1px solid #39ff14 !important;
  box-shadow:
    0 0 0 1px rgba(57, 255, 20, 0.35),
    0 0 12px rgba(57, 255, 20, 0.55),
    0 0 30px rgba(0, 255, 102, 0.28);
}
/* Glow solo en cifras; rótulos y cuerpo sin halo, en tonos claros
 * (≥ 11:1 sobre #0b0b0f) para que el verde no fatigue la lectura. */
html[data-power-accent="neon"] .power-score,
html.accent-skin-neon .power-score {
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.45);
}
html[data-power-accent="neon"] .power-label,
html.accent-skin-neon .power-label {
  color: #d1fae5;
  text-shadow: none;
}
html[data-power-accent="neon"] body.power-hud,
html.accent-skin-neon body.power-hud {
  color: #e4e4e7;
}

/* ── 4 · Tacto global: todas las skins ─────────────────────────────────── */
body.power-hud button:not(:disabled),
body.power-hud [role="button"],
body.power-hud .power-nav-slot,
body.power-hud .ops-dock-btn,
body.power-hud .power-cta,
body.power-hud .power-btn,
body.power-hud .pw-btn {
  transition:
    transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 110ms cubic-bezier(0.34, 1.56, 0.64, 1),
    translate 140ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 140ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  body.power-hud .power-nav-slot:hover,
  body.power-hud .ops-dock-btn:hover:not(:disabled),
  body.power-hud .power-cta:hover:not(:disabled),
  body.power-hud .power-btn:hover:not(:disabled),
  body.power-hud .pw-btn:hover:not(:disabled) {
    translate: 0 -2px;
    filter: brightness(1.12);
  }
  body.power-hud .power-stat-card:hover {
    translate: 0 -2px;
  }
}
body.power-hud button:active:not(:disabled),
body.power-hud [role="button"]:active,
body.power-hud .power-nav-slot:active,
body.power-hud .ops-dock-btn:active:not(:disabled) {
  scale: 0.95;
  translate: 0 0;
  filter: brightness(0.92);
  transition-duration: 100ms;
}
body.power-hud button:focus-visible,
body.power-hud [role="button"]:focus-visible,
body.power-hud a.power-nav-slot:focus-visible {
  outline: 2px solid var(--power-accent, #ff3b30);
  outline-offset: 2px;
}
body.power-hud .power-stat-card {
  transition: translate 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.power-hud button,
  body.power-hud [role="button"],
  body.power-hud .power-nav-slot,
  body.power-hud .ops-dock-btn,
  body.power-hud .power-cta,
  body.power-hud .power-btn,
  body.power-hud .pw-btn,
  body.power-hud .power-stat-card {
    transition-duration: 0ms !important;
    translate: none !important;
    scale: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 121 · LAS SKINS VUELVEN A ESTAR VIVAS
 * ──────────────────────────────────────────────────────────────────────────
 * El fondo vivo (neblina, pulsos de rayo, ondas, partículas) lo pinta
 * power-alfa.css con los nodos que monta soundscape.js, y el túnel láser de
 * Neón lo pinta neon-overdrive.js. Las tres piezas se habían desconectado de
 * las páginas; la Ronda 121 las vuelve a enlazar. Esta sección suma lo que
 * la Ronda 119 había aplanado, sin volver a la rejilla roja:
 *
 *   1. POWER · pasada de escáner: una banda de scanlines finas que barre la
 *      pantalla cada 11 s y desaparece. Vive dentro de #pa-ondas (fijo,
 *      contain: strict), así que no toca el layout ni pinta sobre el
 *      contenido. Una banda en movimiento, no una trama fija a pantalla
 *      completa: la trama fija era el «flicker» del PWA que R89 quitó.
 *   2. NEÓN · latido de borde en las tarjetas: un anillo interior que
 *      respira en OPACITY sobre ::after. Antes se animaba box-shadow
 *      (repintado por fotograma, §6.1); ahora el compositor solo cambia la
 *      opacidad de una capa ya pintada.
 *   3. NEÓN · borde definido por encima del vidrio de power-alfa (que pinta
 *      con !important a (0,2,1); aquí (0,3,2)).
 * Sólo transform / opacity en bucle; nada en perfil con motor de skins
 * (data-power-fx), que tiene su propio lienzo y presupuesto de capas (r69).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Power: pasada de escáner ──────────────────────────────────────── */
html:not([data-power-accent]):not([data-power-fx]) body.power-hud #pa-ondas::before,
html[data-power-accent="power"]:not([data-power-fx]) body.power-hud #pa-ondas::before,
html.accent-skin-power:not([data-power-fx]) body.power-hud #pa-ondas::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22vh;
  height: 22vh;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent, rgba(255, 59, 48, 0.07) 70%, rgba(255, 120, 110, 0.16) 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  animation: pw121-escaner 11s cubic-bezier(0.16, 1, 0.3, 1) 2s infinite;
}
@keyframes pw121-escaner {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  4%   { opacity: 0.9; }
  46%  { transform: translate3d(0, 128vh, 0); opacity: 0.55; }
  52%  { transform: translate3d(0, 128vh, 0); opacity: 0; }
  100% { transform: translate3d(0, 128vh, 0); opacity: 0; }
}

/* ── 2 · Neón: latido de borde (sólo opacity) ──────────────────────────── */
html[data-power-accent="neon"]:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card),
html.accent-skin-neon:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card) {
  position: relative;
}
html[data-power-accent="neon"]:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card)::after,
html.accent-skin-neon:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(57, 255, 20, 0.85),
    inset 0 0 24px -6px rgba(0, 255, 102, 0.45);
  opacity: 0.18;
  animation: pw121-neon-latido 3.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
/* Desfase por posición: la grilla late en ola, no al unísono. */
html[data-power-accent="neon"]:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card):nth-child(3n+2)::after,
html.accent-skin-neon:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card):nth-child(3n+2)::after { animation-delay: -1.2s; }
html[data-power-accent="neon"]:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card):nth-child(3n)::after,
html.accent-skin-neon:not([data-power-fx]) body.power-hud :is(.power-card, .power-panel, .power-stat-card):nth-child(3n)::after { animation-delay: -2.4s; }
@keyframes pw121-neon-latido {
  0%, 100% { opacity: 0.18; }
  12%      { opacity: 0.95; }
  40%      { opacity: 0.34; }
}

/* ── 3 · Neón: borde definido sobre el vidrio de power-alfa ────────────── */
html[data-power-accent="neon"] body.power-hud :is(.power-card, .power-panel, .power-stat-card, .rpg-card, .pw-panel),
html.accent-skin-neon body.power-hud :is(.power-card, .power-panel, .power-stat-card, .rpg-card, .pw-panel) {
  border-top-color: rgba(0, 255, 102, 0.5) !important;
  border-right-color: rgba(0, 255, 102, 0.5) !important;
  border-bottom-color: rgba(0, 255, 102, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -24px 48px -40px rgba(0, 255, 102, 0.6),
    0 0 0 1px rgba(0, 255, 102, 0.18),
    0 0 16px rgba(57, 255, 20, 0.22),
    0 0 40px -10px rgba(0, 255, 102, 0.22) !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-power-accent="neon"] body.power-hud :is(.power-card, .power-stat-card, .rpg-card):hover,
  html.accent-skin-neon body.power-hud :is(.power-card, .power-stat-card, .rpg-card):hover {
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.power-hud #pa-ondas::before { animation: none !important; opacity: 0 !important; }
  html[data-power-accent="neon"] body.power-hud :is(.power-card, .power-panel, .power-stat-card)::after,
  html.accent-skin-neon body.power-hud :is(.power-card, .power-panel, .power-stat-card)::after {
    animation: none !important;
    opacity: 0.35 !important;
  }
}

/* ── 4 · El borde izquierdo de las tarjetas de matrícula es ESTADO ─────────
 * power-alfa pinta `border-left-color: var(--pa-accent) !important` en toda
 * .power-stat-card (0,2,1) y borraba el verde/ámbar de «al día»/«pendiente».
 * El estado manda sobre la skin. */
body.power-hud .power-stat-card.is-ok { border-left-color: rgba(52, 211, 153, 0.75) !important; }
body.power-hud .power-stat-card.is-warn { border-left-color: rgba(251, 191, 36, 0.75) !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 144 · CYBER PULSE — UI CIBERNÉTICA RECTA (skin `cyan`, toda la app)
 * ──────────────────────────────────────────────────────────────────────────
 * Silicio y fibra de carbono, biseles a 45°, neón cian / violeta de alta
 * frecuencia. Vive en power-ui.css porque es la única hoja que cargan TODAS
 * las páginas; power-skins.css solo la carga perfil.html.
 *
 * ESPECIFICIDAD. power-alfa.css viste los paneles de toda skin ≠ power con
 * `html:not(#pa-nunca)…` + !important (un ID de peso). Acá van DOS
 * `:not(#…)` para ganar sin depender del orden de carga de las hojas.
 *
 * CLIP-PATH Y SOMBRAS. Un clip-path recorta también el box-shadow exterior,
 * así que el neón de los paneles es INTERIOR (inset) y las aristas de 45°
 * se dibujan como capas de fondo: un degradado de 135° de 3 px exactamente
 * sobre la diagonal del corte.
 *
 * MOVIMIENTO. Solo transform / opacity / filter (§6.1) con las curvas
 * oficiales (§6.2). La oblea y los nodos los pinta cyber-pulse-fx.js.
 * ════════════════════════════════════════════════════════════════════════ */
html[data-power-accent="cyan"] body.power-hud {
  --cp-cian: 34, 211, 238;
  --cp-violeta: 139, 92, 246;
  --cp-magenta: 217, 70, 239;
  --cp-bisel: 16px;
  /* R186 · Dirección eliminó la fibra de carbono (dos tramas de 45° de 4 px)
     y el barrido de 3 px: juntas se leían como una rejilla gris sobre cada
     tarjeta. Las dos variables conservan su nombre (las usan R144/R146) pero
     ahora son vidrio oscuro pulido: un tinte cian → violeta y un reflejo
     especular arriba. Ninguna capa se repite: cero rejilla. */
  --cp-carbono:
    linear-gradient(160deg, rgba(var(--cp-cian), 0.07), transparent 38%, rgba(var(--cp-violeta), 0.08) 100%);
  --cp-barrido: linear-gradient(180deg, rgba(236, 254, 255, 0.06) 0%, rgba(236, 254, 255, 0.012) 20%, transparent 44%);
  background-color: #03070d !important;
}
/* La rejilla blanca genérica cede su lugar a la oblea (fuera de perfil, que
   tiene su propio motor de ruido en power-skins.css). */
html.cp-oblea-on[data-power-accent="cyan"]:not([data-power-fx]) body.power-hud::before {
  background-image: none !important;
}

/* ── Paneles y modales: bisel a 45°, vidrio oscuro (R186), neón interior ─────────────── */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(
  .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container, dialog[open],
  .boveda-panel, .exito-card, .mc-panel, .pp-modal-caja, .power-card, .power-panel, .power-stat-card, .power-monitor,
  /* los paneles «tailwind» que power-alfa.css también viste */
  :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/"])
) {
  border-radius: 0 !important;
  clip-path: polygon(var(--cp-bisel) 0, 100% 0, 100% calc(100% - var(--cp-bisel)), calc(100% - var(--cp-bisel)) 100%, 0 100%, 0 var(--cp-bisel));
  border: 1px solid rgba(var(--cp-cian), 0.42) !important;
  background-color: rgba(5, 10, 18, 0.93) !important;
  background-image:
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-cian), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-violeta), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(90deg, transparent, rgba(var(--cp-cian), 0.7) 18%, rgba(var(--cp-violeta), 0.6) 82%, transparent),
    var(--cp-barrido),
    var(--cp-carbono) !important;
  background-size: var(--cp-bisel) var(--cp-bisel), var(--cp-bisel) var(--cp-bisel), 100% 1px, auto, auto, auto, auto !important;
  background-position: top left, bottom right, top center, 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cp-cian), 0.12),
    inset 0 0 22px rgba(var(--cp-cian), 0.10),
    inset 0 -18px 30px -24px rgba(var(--cp-violeta), 0.55),
    inset 0 1px 0 rgba(186, 246, 255, 0.22) !important;
}
/* El velo de los modales: silicio oscuro con un tinte violeta. */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(.pw-overlay:not(.hidden) > .pw-backdrop, .pw-backdrop, .power-modal-backdrop) {
  background: rgba(2, 5, 12, 0.78) !important;
}
/* Entrada de ventanas: pop elástico en transform (200–240 ms, §6.2). */
html[data-power-accent="cyan"] body.power-hud .pw-overlay:not(.hidden) :is(.pw-panel, .pw-modal, .pw-modal-box, .modal-card) {
  animation: cpEntra 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Ninguno de estos paneles se centra con transform (verificado): el pop-in
   puede ir en transform sin pisar ningún translate(-50%, -50%). */
@keyframes cpEntra {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ── Controles: bordes que se encienden y glow impact ──────────────────── */
html.cp-oblea-on[data-power-accent="cyan"] body.power-hud :is(button, [role="button"], a.power-nav-slot, .ops-dock-btn, .hud-slot) {
  transition: scale 120ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  html.cp-oblea-on[data-power-accent="cyan"] body.power-hud :is(button, [role="button"], a.power-nav-slot, .ops-dock-btn, .hud-slot):not(:disabled):hover {
    filter: brightness(1.12) drop-shadow(0 0 5px rgba(34, 211, 238, 0.65)) drop-shadow(0 0 1px rgba(196, 181, 253, 0.9));
  }
}
html.cp-oblea-on[data-power-accent="cyan"] body.power-hud :is(button, [role="button"], a.power-nav-slot, .ops-dock-btn, .hud-slot):not(:disabled):active {
  scale: 0.95;
}
/* El destello del toque (cyber-pulse-fx.js lo pone 180 ms). */
html.cp-oblea-on[data-power-accent="cyan"] body.power-hud .cp-encendido {
  filter: brightness(1.45) drop-shadow(0 0 9px rgba(34, 211, 238, 0.95)) drop-shadow(0 0 2px #ffffff) !important;
}
/* Glow impact: retícula cuadrada que se expande desde el punto del toque. */
#cp-impacto {
  position: fixed; left: 0; top: 0; width: 80px; height: 80px; pointer-events: none; z-index: 2147483000;
  opacity: 0; will-change: transform, opacity;
}
#cp-impacto::before, #cp-impacto::after {
  content: ""; position: absolute; inset: 22px; border: 1.5px solid rgba(34, 211, 238, 0.95);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8), inset 0 0 8px rgba(139, 92, 246, 0.6);
}
#cp-impacto::after { inset: 32px; border-color: rgba(236, 254, 255, 0.95); transform: rotate(45deg); }
#cp-impacto.cp-impacto--vivo { animation: cpImpacto 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#cp-impacto.cp-impacto--vivo::before { animation: cpImpactoAro 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cpImpacto {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cpImpactoAro {
  0% { transform: scale(0.35); }
  100% { transform: scale(1.6); }
}

/* ── ▶ de la pista Cyber Pulse (al lado del botón de sonido) ───────────── */
.cp-play { color: #a5f3fc; }
html[data-power-accent="cyan"] .power-mute-btn.cp-play {
  min-width: 44px; min-height: 44px; border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(3, 7, 13, 0.95) 62%);
  border-color: rgba(34, 211, 238, 0.6); color: #ecfeff;
}
html[data-power-accent="cyan"] .cp-play[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(3, 7, 13, 0.95) 62%);
  border-color: rgba(196, 181, 253, 0.7);
}
.cp-play--flotante {
  position: fixed !important; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 90; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(34, 211, 238, 0.6); background: rgba(3, 7, 13, 0.92);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

@media (prefers-reduced-motion: reduce) {
  html[data-power-accent="cyan"] body.power-hud .pw-overlay:not(.hidden) :is(.pw-panel, .pw-modal, .pw-modal-box, .modal-card) { animation: none; }
  #cp-impacto { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 146 · CYBER PULSE — DARK CYBER GLASS (modales)
 * ──────────────────────────────────────────────────────────────────────────
 * Los MODALES dejan el carbono opaco y pasan a vidrio oscuro pulido: la
 * oblea y los rayos de energía se ven difuminados a través del panel. Mismo
 * bisel de 45° y mismo peso de selector que la regla de R144 (dos
 * `:not(#…)`), más abajo en la hoja: gana por orden. Las tarjetas del panel
 * conservan el carbono; solo cambian las ventanas emergentes.
 *
 * Pulido = un reflejo especular en diagonal (115°), recto: nada radial.
 * Los bordes reaccionan al toque con #cp-vidrio (cyber-pulse-fx.js), que
 * se anima SOLO en opacidad.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(
  .pw-overlay:not(.hidden) .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container,
  dialog[open], .pp-modal-caja, .mc-panel, .exito-card
) {
  /* Base (táctil y sin soporte): vidrio ahumado casi opaco, SIN
     backdrop-filter. power-alfa.css §N lo quita a propósito en pantallas
     táctiles: con la GPU al límite Chrome rasterizaba vacíos los modales
     difuminados, y ahora además corre el shader de energía detrás. */
  background-color: rgba(4, 9, 17, 0.94) !important;
  background-image:
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-cian), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-violeta), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(90deg, transparent, rgba(var(--cp-cian), 0.8) 18%, rgba(var(--cp-violeta), 0.7) 82%, transparent),
    linear-gradient(115deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 16%, transparent 30%, transparent 62%, rgba(186, 246, 255, 0.06) 70%, transparent 78%),
    var(--cp-barrido) !important;
  background-size: var(--cp-bisel) var(--cp-bisel), var(--cp-bisel) var(--cp-bisel), 100% 1px, 100% 100%, auto !important;
  background-position: top left, bottom right, top center, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  border-color: rgba(var(--cp-cian), 0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cp-cian), 0.16),
    inset 0 0 26px rgba(var(--cp-cian), 0.12),
    inset 0 -20px 34px -24px rgba(var(--cp-violeta), 0.6),
    inset 0 1px 0 rgba(236, 254, 255, 0.3) !important;
}
/* Puntero fino (escritorio) con soporte: el vidrio translúcido de verdad,
   con la oblea y los rayos difuminados a través del panel. */
@media (pointer: fine) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(
      .pw-overlay:not(.hidden) .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container,
      dialog[open], .pp-modal-caja, .mc-panel, .exito-card
    ) {
      background-color: rgba(4, 9, 17, 0.72) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(0.8) !important;
              backdrop-filter: blur(18px) saturate(1.5) brightness(0.8) !important;
    }
  }
}

/* El borde que se enciende al tocar: mismo bisel, neón interior intenso y
   una retícula ortogonal (una línea horizontal y una vertical) que cruza el
   punto del toque. Un solo elemento fijo para toda la app. */
#cp-vidrio {
  position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2147482999;
  opacity: 0; will-change: opacity; contain: strict;
  clip-path: polygon(var(--cp-bisel, 16px) 0, 100% 0, 100% calc(100% - var(--cp-bisel, 16px)), calc(100% - var(--cp-bisel, 16px)) 100%, 0 100%, 0 var(--cp-bisel, 16px));
  box-shadow:
    inset 0 0 0 1.5px rgba(34, 211, 238, 0.95),
    inset 0 0 18px rgba(34, 211, 238, 0.55),
    inset 0 0 2px 1px rgba(236, 254, 255, 0.8);
  background:
    linear-gradient(90deg, transparent calc(var(--cp-tx, 50%) - 1px), rgba(186, 246, 255, 0.55) var(--cp-tx, 50%), transparent calc(var(--cp-tx, 50%) + 1px)),
    linear-gradient(0deg, transparent calc(100% - var(--cp-ty, 50%) - 1px), rgba(186, 246, 255, 0.55) calc(100% - var(--cp-ty, 50%)), transparent calc(100% - var(--cp-ty, 50%) + 1px)),
    linear-gradient(135deg, transparent calc(50% - 2px), #ecfeff 50%, transparent calc(50% + 2px)) top left / var(--cp-bisel, 16px) var(--cp-bisel, 16px) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 2px), #ecfeff 50%, transparent calc(50% + 2px)) bottom right / var(--cp-bisel, 16px) var(--cp-bisel, 16px) no-repeat;
}
#cp-vidrio.cp-vidrio--vivo { animation: cpVidrio 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cpVidrio {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #cp-vidrio { display: none; }
}

/* R146 · Fuera los aros: power-alfa.css lanza en CADA kick un anillo
   concéntrico que crece desde el centro (#pa-ondas › .pa-onda) y una lluvia
   de puntos difuminados (#pa-particulas). En Cyber Pulse eso lo hacen los
   rayos angulares y los paquetes de datos de cyber-pulse-fx.js. */
html[data-power-accent="cyan"] body.power-hud :is(#pa-ondas, #pa-particulas) { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 147 · CENTRO DE AVISOS POR ROL + ESTADO DE APROBACIÓN DE VENTAS
 * ──────────────────────────────────────────────────────────────────────────
 * Las tarjetas del centro de avisos (`.hud-venta-card`, `.hud-btn-aprobar`)
 * NO tenían ni una regla CSS: se veían por restos de Tailwind. Ahora cada
 * aviso es una tarjeta de vidrio con: badge de estado, hora, título humano,
 * alumna + monto y, para Dirección, Aprobar / Rechazar de 44 px.
 *
 * Color = estado (paleta emisiva del proyecto): ámbar = pendiente,
 * esmeralda = aprobada, carmesí = rechazada. El marco y el resplandor
 * siguen al acento de la skin activa (--power-accent).
 * Movimiento: solo transform / opacity, curvas oficiales (§6.1 / §6.2).
 * ════════════════════════════════════════════════════════════════════════ */
#hud-notif-center:not(.hidden) { background: rgba(0, 0, 0, 0.55) !important; }
#hud-notif-center .pw-avisos { gap: 0.85rem; border-color: color-mix(in srgb, var(--power-accent, #22d3ee) 45%, transparent) !important; }
.pw-avisos-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0;
  padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.pw-avisos-tit { min-width: 0; }
.pw-avisos-kicker { margin: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--power-accent, #22d3ee); }
.pw-avisos-tit h3 { margin: 0.15rem 0 0; font-size: 1.05rem; font-weight: 800; color: #fafafa; display: flex; align-items: center; gap: 0.5rem; }
.pw-avisos-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 800; color: #0b0b10;
  background: var(--power-accent, #22d3ee); box-shadow: 0 0 14px var(--power-accent-soft, rgba(34, 211, 238, 0.4)); }
.pw-avisos-cerrar { width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #d4d4d8;
  font-size: 1.5rem; line-height: 1; cursor: pointer; user-select: none;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1); }
.pw-avisos-cerrar:active { transform: scale(0.95); }
.pw-avisos-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.65rem;
  padding: 0.15rem 0.15rem 0.25rem; -webkit-overflow-scrolling: touch; }
.pw-avisos-vacio { margin: 0; padding: 2rem 0.75rem; text-align: center; font-size: 0.85rem; line-height: 1.5; color: #a1a1aa; }
.pw-avisos-vacio.is-error { color: #fda4af; }

/* ── Tarjeta de aviso ────────────────────────────────────────────────── */
.pw-aviso { --av: 161, 161, 170; position: relative; min-width: 0; padding: 0.8rem 0.9rem 0.8rem 1rem; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(var(--av), 0.10), rgba(13, 13, 18, 0.92) 55%), #0d0d12;
  border: 1px solid rgba(var(--av), 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: pwAvisoEntra 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pw-aviso::before { content: ""; position: absolute; left: 0; top: 0.7rem; bottom: 0.7rem; width: 3px; border-radius: 0 3px 3px 0;
  background: rgb(var(--av)); box-shadow: 0 0 10px rgba(var(--av), 0.8); }
.pw-aviso[data-estado="pendiente"] { --av: 245, 158, 11; }
.pw-aviso[data-estado="aprobado"] { --av: 16, 185, 129; }
.pw-aviso[data-estado="rechazado"] { --av: 244, 63, 94; }
/* Dirección: la alerta destaca y late (solo opacidad del resplandor). */
.pw-aviso--alerta { box-shadow: 0 0 0 1px rgba(var(--av), 0.25), 0 0 18px rgba(var(--av), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.pw-aviso--alerta::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 22px rgba(var(--av), 0.45); opacity: 0; animation: pwAvisoLate 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate; }
.pw-aviso.is-nuevo { box-shadow: 0 0 0 1px rgba(var(--av), 0.5), 0 0 16px rgba(var(--av), 0.3); }
.pw-aviso.is-resuelto { opacity: 0.55; transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pwAvisoEntra {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes pwAvisoLate {
  from { opacity: 0.15; }
  to { opacity: 1; }
}

.pw-aviso-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.pw-aviso-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border-radius: 999px; min-width: 0;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: rgb(var(--av)); background: rgba(var(--av), 0.12); border: 1px solid rgba(var(--av), 0.45); }
.pw-aviso-badge[data-estado="pendiente"] { --av: 245, 158, 11; color: #fcd34d; }
.pw-aviso-badge[data-estado="aprobado"] { --av: 16, 185, 129; color: #6ee7b7; }
.pw-aviso-badge[data-estado="rechazado"] { --av: 244, 63, 94; color: #fda4af; }
.pw-aviso-hora { flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; color: #a1a1aa; }
.pw-aviso-titulo { margin: 0.5rem 0 0; font-size: 0.88rem; font-weight: 600; line-height: 1.35; color: #f4f4f5; overflow-wrap: anywhere; }
.pw-aviso-titulo b { color: #fff; }
.pw-aviso-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-top: 0.35rem; min-width: 0; }
.pw-aviso-alumna { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: #d4d4d8; }
.pw-aviso-monto { flex-shrink: 0; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 12px rgba(var(--av), 0.5); }
.pw-aviso-meta { margin: 0.35rem 0 0; font-size: 0.72rem; line-height: 1.4; color: #a1a1aa; overflow-wrap: anywhere; }
.pw-aviso-meta a { color: var(--power-accent, #22d3ee); text-decoration: underline; text-underline-offset: 2px; }
.pw-aviso-dup { margin: 0.4rem 0 0; font-size: 0.72rem; font-weight: 700; color: #fcd34d; }
.pw-aviso-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.7rem; }

/* Botones de resolución (avisos, Bóveda y ficha): 44 px, compresión háptica. */
.pw-aviso-btn, .feed-aprob-btn, .hist-aprob-btn {
  min-height: 44px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0 0.75rem;
  border-radius: 0.8rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1); }
.pw-aviso-btn:active:not(:disabled), .feed-aprob-btn:active:not(:disabled), .hist-aprob-btn:active:not(:disabled) { transform: scale(0.95); }
.pw-aviso-btn:disabled, .feed-aprob-btn:disabled, .hist-aprob-btn:disabled { filter: grayscale(0.6) brightness(0.7); cursor: wait; }
.pw-aviso-btn--aprobar, .feed-aprob-btn--ok, .hist-aprob-btn--ok {
  color: #d1fae5; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.6); box-shadow: 0 0 14px rgba(16, 185, 129, 0.25); }
.pw-aviso-btn--rechazar, .feed-aprob-btn--no, .hist-aprob-btn--no {
  color: #ffe4e6; background: rgba(244, 63, 94, 0.10); border: 1px solid rgba(244, 63, 94, 0.5); }
:is(.pw-aviso-btn--rechazar, .feed-aprob-btn--no, .hist-aprob-btn--no)[data-confirmar="1"] { background: rgba(244, 63, 94, 0.32); color: #fff; }

/* ── Bóveda: chip de estado de aprobación + acciones de Dirección ───── */
.feed-chip.feed-chip-aprob { margin-right: 0.3rem; }
.feed-chip-aprob[data-aprob="pendiente"] { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.55); color: #fcd34d;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25); }
.feed-chip-aprob[data-aprob="aprobada"] { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.38); color: #6ee7b7; }
.feed-chip-aprob[data-aprob="rechazada"] { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.45); color: #fda4af; }
.feed-aprob-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-top: 0.5rem; max-width: 22rem; }
.boveda-stat.boveda-stat--pend b { color: #fcd34d; }

/* ── Ficha de alumna: la fila y sus acciones, hermanas (no anidadas) ── */
#ficha-historial .hist-venta-item { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
#ficha-historial .hist-aprob-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .pw-aviso, .pw-aviso--alerta::after { animation: none !important; }
  .pw-aviso--alerta::after { opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 149 · SHOWCASE ENGINE · tarjeta de ingresos ⇄ estadísticas del show
 * Tocar la tarjeta conmuta la vista (el contenido aparece con un pop en
 * transform/opacity; el cambio de vista en sí no es una animación de layout).
 * ════════════════════════════════════════════════════════════════════════ */
#hero-finance[role="button"] { cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms cubic-bezier(0.16, 1, 0.3, 1); }
#hero-finance[role="button"]:active { transform: scale(0.99); }
#hero-finance[role="button"]:focus-visible { outline: 2px solid rgba(251, 191, 36, 0.7); outline-offset: 2px; }
#hero-finance .hero-vista-show { display: none; }
#hero-finance[data-vista="show"] .hero-vista-finanzas { display: none; }
#hero-finance[data-vista="show"] .hero-vista-show { display: block; animation: heroShowEntra 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes heroShowEntra {
  from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.hero-show-chip { display: inline-flex; align-items: center; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.62rem;
  letter-spacing: 0.08em; color: #fde68a; border: 1px solid rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.08); vertical-align: middle; }
.hero-show-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.6rem; margin-top: 0.4rem; }
.hero-show-fn { min-width: 0; padding: 0.65rem 0.8rem; border-radius: 0.9rem; background: rgba(251, 191, 36, 0.05); border: 1px solid rgba(251, 191, 36, 0.3); font-size: 0.82rem; }
.hero-show-fn p { margin: 0.12rem 0; color: #e4e4e7; overflow-wrap: anywhere; }
.hero-show-fn .hero-show-fn-tit { font-weight: 800; color: #fde68a; }
@media (prefers-reduced-motion: reduce) {
  #hero-finance[data-vista="show"] .hero-vista-show { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 150 · GESTOR DE CURSOS (Dirección) + tags canónicos de la alumna
 * Usa los componentes de showcase.css (sc-modal, sc-btn, sc-campo).
 * ════════════════════════════════════════════════════════════════════════ */
/* R151 · Botón de Director junto a «+ Registrar Pago»: Dark Cyber Glass con
   borde neón rojo reactivo. La altura de 44 px se declara solo acá (§6.4). */
.gc-abrir { min-height: 44px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0 1rem; border-radius: 0.85rem; cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap;
  font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fecaca;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(13, 13, 18, 0.78) 55%), rgba(13, 13, 18, 0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(239, 68, 68, 0.55); box-shadow: 0 0 14px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms cubic-bezier(0.16, 1, 0.3, 1); }
.gc-abrir:hover { filter: brightness(1.18) drop-shadow(0 0 8px rgba(239, 68, 68, 0.55)); }
.gc-abrir:active { transform: scale(0.95); }
.gc-abrir:focus-visible { outline: 2px solid rgba(239, 68, 68, 0.8); outline-offset: 2px; }
.gc-panel { max-width: 34rem; }
.gc-form { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem; border-radius: 1rem;
  background: rgba(251, 191, 36, 0.05); border: 1px solid rgba(251, 191, 36, 0.35); }
.gc-modo { margin: 0; font-weight: 800; color: #fde68a; overflow-wrap: anywhere; }
.gc-impacto { margin: 0; padding: 0.55rem 0.7rem; border-radius: 0.75rem; font-size: 0.82rem; line-height: 1.4;
  color: #a5f3fc; background: rgba(34, 211, 238, 0.07); border: 1px solid rgba(34, 211, 238, 0.4); }
.gc-lista { display: flex; flex-direction: column; gap: 0.4rem; max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; min-width: 0; }
.gc-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.65rem; border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.gc-fila-txt { min-width: 0; display: flex; flex-direction: column; }
.gc-fila-txt b { color: #fafafa; font-size: 0.88rem; overflow-wrap: anywhere; }
.gc-fila-txt span { color: #a1a1aa; font-size: 0.75rem; }
.chip-curso.chip-curso--sin-ubicar { border-color: rgba(245, 158, 11, 0.55) !important; color: #fcd34d !important; background: rgba(245, 158, 11, 0.08) !important; }

/* RONDA 187 · giro del ícono spinner (power-icons.js · .pw-ico--gira). Va acá,
   antes del bloque de la batería R168, para no entrar en su auditoría. */
@keyframes pwIcoGira {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 168 · BATERÍA POWER — DARK CYBER GLASS POR SKIN Y RANGO
 * ──────────────────────────────────────────────────────────────────────────
 * Una sola casa para la tarjeta CLS del perfil (antes vivía en el <style>
 * inline de perfil.html y animaba height/width: reflow por fotograma).
 *
 * ANATOMÍA (de atrás hacia adelante, todo absoluto dentro de .pw-batt-shell):
 *   aura      halo radial del color del rango · opacity/transform
 *   cap/base  bornes en metal (latón por defecto; cada skin elige su metal)
 *   body      cuerpo de obsidiana con bisel metálico; overflow hidden
 *   residuo   tinte del rango anterior: subir de rango nunca se ve como vaciarse
 *   fill      la carga: translateY((1 − k)·100 %) · k = --bat-k (perfil.js)
 *   plasma    textura por skin dentro de la carga · translateY lento
 *   cresta    línea blanca de superficie de la carga
 *   cells     10 celdas (separadores oscuros) sobre la carga
 *   glass     reflejo de cristal estático
 *   sweep     barrido de luz · translateX + skewX
 *   bolt      rayo SVG · scale + drop-shadow
 *
 * COLOR: el rango (data-rango 1–4) decide cuál de los cuatro colores de la
 * skin (--bat-c1…--bat-c4, power-skins.css) es --bat-fill-c. El resplandor
 * crece con el rango (--bat-glow-a). Solo transform / opacity / filter se
 * animan; curvas oficiales (§6.1, §6.2).
 * ════════════════════════════════════════════════════════════════════════ */

/* Valores por defecto (skin Power). Las skins los redefinen en
   html[data-power-accent="…"] (power-skins.css); por eso van en `html`,
   la especificidad más baja posible. */
html {
  --bat-c1: #ff3b30;
  --bat-c2: #ff7a1a;
  --bat-c3: #ffd166;
  --bat-c4: #fff3c4;
  --bat-metal-hi: #f7e4a8;
  --bat-metal-mid: #c9962e;
  --bat-metal-lo: #5a3f10;
  --bat-glass: rgba(255, 255, 255, 0.14);
  --bat-plasma: repeating-linear-gradient(-28deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, 0.16) 9px 11px, rgba(255, 255, 255, 0) 11px 22px);
}

/* Rango → color encendido, residuo y resplandor. */
.pw-batt { --bat-fill-c: var(--bat-c1); --bat-residuo-c: transparent; --bat-glow-a: 38%; --bat-glow-px: 16px; --bat-aura-o: 0.45; }
.pw-batt[data-rango="2"] { --bat-fill-c: var(--bat-c2); --bat-residuo-c: var(--bat-c1); --bat-glow-a: 55%; --bat-glow-px: 22px; --bat-aura-o: 0.65; }
.pw-batt[data-rango="3"] { --bat-fill-c: var(--bat-c3); --bat-residuo-c: var(--bat-c2); --bat-glow-a: 72%; --bat-glow-px: 28px; --bat-aura-o: 0.85; }
.pw-batt[data-rango="4"] { --bat-fill-c: var(--bat-c4); --bat-residuo-c: var(--bat-c3); --bat-glow-a: 90%; --bat-glow-px: 36px; --bat-aura-o: 1; }

/* ── La tarjeta ──────────────────────────────────────────────────────────── */
.pf-cls.pw-batt {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem;
  align-items: center;
  padding: 1.1rem 1.25rem 1.05rem 1.1rem;
  border-radius: 1.35rem;
  text-align: left;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 38%),
    radial-gradient(120% 95% at 0% 0%, color-mix(in srgb, var(--bat-fill-c) 16%, transparent), transparent 58%),
    rgba(9, 9, 13, 0.74);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--bat-metal-mid) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 14px 30px -16px rgba(0, 0, 0, 0.9),
    0 0 30px color-mix(in srgb, var(--bat-fill-c) 22%, transparent);
  transition: box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Bisel en metal: dos esquinas marcadas (mismo lenguaje del hero). */
.pf-cls.pw-batt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(var(--bat-metal-hi), var(--bat-metal-hi)) top left / 26px 2px no-repeat,
    linear-gradient(var(--bat-metal-hi), var(--bat-metal-hi)) top left / 2px 26px no-repeat,
    linear-gradient(var(--bat-metal-mid), var(--bat-metal-mid)) bottom right / 20px 1px no-repeat,
    linear-gradient(var(--bat-metal-mid), var(--bat-metal-mid)) bottom right / 1px 20px no-repeat;
  opacity: 0.8;
}
.pw-batt.is-ascenso { animation: pwBattAscenso 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
.pw-batt.is-reskin .pw-batt-shell { animation: pwBattReskin 520ms cubic-bezier(0.16, 1, 0.3, 1) 1; }

/* ── El escenario de la batería ──────────────────────────────────────────── */
.pw-batt-stage {
  position: relative;
  width: 5.6rem;
  height: 9rem;
  flex-shrink: 0;
}
.pw-batt-aura {
  position: absolute;
  inset: -14% -36%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bat-fill-c) 62%, transparent), color-mix(in srgb, var(--bat-fill-c) 18%, transparent) 55%, transparent 76%);
  opacity: var(--bat-aura-o);
  filter: blur(7px);
  transform-origin: 50% 55%;
  animation: pwBattAura 3.4s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
.pw-batt-shell {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.pw-batt-cap,
.pw-batt-base {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.35)),
    linear-gradient(90deg, var(--bat-metal-lo), var(--bat-metal-hi) 28%, var(--bat-metal-mid) 52%, var(--bat-metal-hi) 78%, var(--bat-metal-lo));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 2px rgba(0, 0, 0, 0.55),
    0 0 10px color-mix(in srgb, var(--bat-fill-c) 45%, transparent);
}
.pw-batt-cap {
  top: 0;
  width: 44%;
  height: 12px;
  border-radius: 5px 5px 2px 2px;
}
.pw-batt-cap::after {
  /* ranura del borne */
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 4px;
  height: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
}
.pw-batt-base {
  bottom: 0;
  width: 78%;
  height: 7px;
  border-radius: 2px 2px 6px 6px;
}
.pw-batt-body {
  position: absolute;
  inset: 11px 0 6px 0;
  border-radius: 1rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #1a1a21 0%, #0b0b10 40%, #050507 100%);
  border: 2px solid var(--bat-metal-mid);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 12px 18px -12px rgba(255, 255, 255, 0.2),
    inset 0 -16px 22px -14px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 var(--bat-glow-px) color-mix(in srgb, var(--bat-fill-c) var(--bat-glow-a), transparent);
  transition: box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pw-batt-residuo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bat-residuo-c) 70%, transparent), var(--bat-residuo-c));
  opacity: 0.22;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pw-batt-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  --bat-k: 0;
  transform: translateY(calc((1 - var(--bat-k)) * 100%));
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bat-fill-c) 58%, #ffffff) 0%,
    var(--bat-fill-c) 38%,
    color-mix(in srgb, var(--bat-fill-c) 72%, #000000) 100%);
  box-shadow: 0 0 18px var(--bat-fill-c), 0 -2px 10px color-mix(in srgb, var(--bat-fill-c) 60%, #fff);
  will-change: transform;
}
.pw-batt-plasma {
  position: absolute;
  inset: -30% 0;
  display: block;
  background: var(--bat-plasma);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: pwBattPlasma 5.2s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
.pw-batt-cresta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  display: block;
  background: #fff;
  opacity: 0.85;
  box-shadow: 0 0 8px #fff;
}
.pw-batt-cells {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(10% - 2px), rgba(0, 0, 0, 0.78) calc(10% - 2px) 10%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.35));
}
.pw-batt-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.07) 16%, transparent 40%, transparent 72%, rgba(255, 255, 255, 0.09) 100%),
    linear-gradient(180deg, var(--bat-glass) 0%, transparent 28%);
}
.pw-batt-sweep {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 42%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.8;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 68%, transparent 100%);
  transform: translateX(-170%) skewX(-18deg);
  animation: pwBattSweep 4.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s infinite;
}
.pw-batt-bolt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 0 6px var(--bat-fill-c)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
  transform-origin: 50% 50%;
}
.pw-batt-bolt svg { width: 46%; height: auto; display: block; }
.pw-batt[data-rango="2"] .pw-batt-bolt,
.pw-batt[data-rango="3"] .pw-batt-bolt,
.pw-batt[data-rango="4"] .pw-batt-bolt { animation: pwBattBolt 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.pw-batt[data-rango="4"] .pw-batt-bolt { color: #fff8dc; }

/* Powie: cuadro de 48×48 nítido; la tira entera corre por transform con
   steps(N), N leído del ancho real de la imagen (perfil.js). */
.pw-batt-powie {
  position: absolute;
  right: -14px;
  bottom: -4px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px) scale(0.8);
  transform-origin: 50% 100%;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.pw-batt-powie > i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--powie-w, 384px);
  height: 48px;
  background: url(../../public/assets/sprites/bases/powies_bateria_idle.png) 0 0 / auto no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pw-batt[data-lleno="1"] .pw-batt-powie.is-ready { opacity: 1; transform: translateY(0) scale(1); }
.pw-batt[data-lleno="1"] .pw-batt-powie.is-ready > i {
  animation: pwBattPowie 1.1s steps(var(--powie-frames, 8)) infinite;
}

/* ── Texto ───────────────────────────────────────────────────────────────── */
.pw-batt-info { min-width: 0; }
.pw-batt .cls-label {
  margin: 0 0 0.3rem;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b8b95;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pw-batt .cls-big {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.pw-batt .cls-big .dim { color: #52525b; font-size: 0.55em; font-weight: 600; }
.pw-batt-badge {
  margin: 0.35rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bat-fill-c);
  text-shadow: 0 0 10px color-mix(in srgb, var(--bat-fill-c) 70%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pw-batt .cls-sub {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: #a1a1aa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pw-batt .cls-bar {
  margin-top: 0.7rem;
  height: 8px;
  border-radius: 999px;
  background: #121217;
  border: 1px solid color-mix(in srgb, var(--bat-metal-mid) 45%, #27272a);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.pw-batt .cls-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  --bat-k: 0;
  border-radius: inherit;
  transform-origin: 0 50%;
  transform: scaleX(var(--bat-k));
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bat-fill-c) 55%, #000), var(--bat-fill-c));
  box-shadow: 0 0 12px color-mix(in srgb, var(--bat-fill-c) 60%, transparent);
}
.pw-batt-pips {
  display: flex;
  gap: 6px;
  margin-top: 0.55rem;
}
.pw-batt-pips > i {
  display: block;
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), filter 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pw-batt-pips > i:nth-child(1).is-on, .pw-batt-pips > i:nth-child(1).is-now { background: var(--bat-c1); border-color: var(--bat-c1); box-shadow: 0 0 8px var(--bat-c1); }
.pw-batt-pips > i:nth-child(2).is-on, .pw-batt-pips > i:nth-child(2).is-now { background: var(--bat-c2); border-color: var(--bat-c2); box-shadow: 0 0 8px var(--bat-c2); }
.pw-batt-pips > i:nth-child(3).is-on, .pw-batt-pips > i:nth-child(3).is-now { background: var(--bat-c3); border-color: var(--bat-c3); box-shadow: 0 0 8px var(--bat-c3); }
.pw-batt-pips > i.is-now { animation: pwBattPip 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate; }
.pw-batt-falta {
  margin: 0.45rem 0 0;
  font-size: 11px;
  color: #7c7c86;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pw-batt[data-lleno="1"] .pw-batt-falta { color: var(--bat-c4); }
/* Perfil ajeno: solo lectura, sin pista de «te faltan». */
.pw-batt[data-solo-lectura="1"] .pw-batt-falta { display: none; }

/* ── Móvil (≤ 639 px): fila compacta, misma anatomía ─────────────────────── */
@media (max-width: 639px) {
  .pf-cls.pw-batt {
    gap: 0.85rem;
    padding: 0.8rem 0.95rem 0.75rem 0.85rem;
    border-radius: 1.1rem;
    margin-top: 0.75rem !important;
  }
  .pw-batt-stage { width: 4.4rem; height: 7.2rem; }
  .pw-batt-cap { height: 10px; }
  .pw-batt-body { inset: 9px 0 5px 0; border-radius: 0.8rem; }
  .pw-batt .cls-big { font-size: 1.5rem; }
  .pw-batt-badge { font-size: 10px; letter-spacing: 0.12em; }
  .pw-batt-powie { right: -16px; bottom: -6px; }
}

/* ── Movimiento ──────────────────────────────────────────────────────────── */
@keyframes pwBattSweep {
  0%        { transform: translateX(-170%) skewX(-18deg); }
  55%, 100% { transform: translateX(330%) skewX(-18deg); }
}
@keyframes pwBattPlasma {
  from { transform: translateY(-7%); }
  to   { transform: translateY(7%); }
}
@keyframes pwBattAura {
  from { opacity: calc(var(--bat-aura-o) * 0.6); transform: scale(0.96); }
  to   { opacity: var(--bat-aura-o); transform: scale(1.08); }
}
@keyframes pwBattBolt {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px var(--bat-fill-c)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)); }
  50%      { transform: scale(1.14); filter: drop-shadow(0 0 16px var(--bat-fill-c)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)) brightness(1.3); }
}
@keyframes pwBattPip {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
@keyframes pwBattAscenso {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(1.05); filter: brightness(1.7); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes pwBattReskin {
  0%   { opacity: 0.3; filter: saturate(0.2) brightness(1.7); }
  100% { opacity: 1; filter: saturate(1) brightness(1); }
}
@keyframes pwBattPowie {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--powie-w, 384px))); }
}
@media (prefers-reduced-motion: reduce) {
  .pw-batt-aura, .pw-batt-plasma, .pw-batt-sweep, .pw-batt-bolt, .pw-batt-pips > i, .pw-batt.is-ascenso,
  .pw-batt.is-reskin .pw-batt-shell, .pw-batt[data-lleno="1"] .pw-batt-powie.is-ready > i { animation: none !important; }
}

/* ==========================================================================
   RONDA 172 · SELECTS EN PALETA OSCURA NATIVA
   --------------------------------------------------------------------------
   En Windows/Chrome las <option> de un <select> se pintan con el fondo del
   sistema (blanco) y heredan el color de texto claro de la app: quedaban
   invisibles hasta pasar el mouse (selector del profesor en «Clase de
   prueba», registrar-pago.html). Se fija fondo obsidiana y texto claro en
   TODOS los selects; `color-scheme: dark` le pide al navegador el menú
   desplegable oscuro también.
   ========================================================================== */
select {
  color-scheme: dark;
}
select option,
select optgroup {
  background-color: #0d0d12;
  color: #f4f4f5;
}
select option:disabled {
  color: #71717a;
}
select option:checked {
  background-color: #27272a;
  color: #ffffff;
}
#profesor-select {
  color: #f4f4f5;
  background-color: #09090b;
}


/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 173 · INGRESOS ⇄ SHOW SIN SALTOS
 * Las dos vistas comparten la MISMA celda de una rejilla (grid-area 1/1) y
 * la tarjeta tiene un alto fijo: cambiar de vista es un fundido con
 * desplazamiento corto (solo opacity / transform, §6.1) y la caja no mide
 * nunca otra cosa. Lo que no entra en la vista del show se desplaza DENTRO
 * de su celda. La conmutación la hace una flecha con tiquete a la derecha.
 * ════════════════════════════════════════════════════════════════════════ */
#hero-finance.hero-r173 { position: relative; height: 12.25rem; overflow: hidden; cursor: default; padding-right: 3.6rem; }
#hero-finance.hero-r173 .hero-vistas { display: grid; height: 100%; min-height: 0; }
#hero-finance.hero-r173 .hero-vistas > * {
  grid-area: 1 / 1; min-width: 0; min-height: 0; height: 100%; overflow: hidden;
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
#hero-finance.hero-r173 .hero-vista-show { display: block; opacity: 0; transform: translate3d(14px, 0, 0); pointer-events: none; overflow-y: auto; overscroll-behavior: contain; }
#hero-finance.hero-r173 .hero-vista-finanzas { opacity: 1; transform: none; }
#hero-finance.hero-r173[data-vista="show"] .hero-vista-finanzas { display: block; opacity: 0; transform: translate3d(-14px, 0, 0); pointer-events: none; }
#hero-finance.hero-r173[data-vista="show"] .hero-vista-show { display: block; opacity: 1; transform: none; pointer-events: auto; animation: none; }
#hero-finance.hero-r173 .hero-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
#hero-finance.hero-r173 .hero-show-fn { padding: 0.4rem 0.55rem; font-size: 0.72rem; }
#hero-finance.hero-r173 #hero-show-cuerpo .text-3xl { font-size: 1.5rem; line-height: 1.2; margin-top: 0.4rem; }
.hero-show-toggle {
  position: absolute; top: 50%; right: 0.75rem; z-index: 2; transform: translateY(-50%);
  width: 44px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  border-radius: 0.9rem; cursor: pointer; user-select: none; touch-action: manipulation; color: #fde68a;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.04)), rgba(13, 13, 18, 0.78);
  border: 1px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-show-toggle:hover { filter: brightness(1.2); }
.hero-show-toggle:active { transform: translateY(-50%) scale(0.95); }
.hero-show-toggle:focus-visible { outline: 2px solid rgba(251, 191, 36, 0.8); outline-offset: 2px; }
.hero-show-toggle-ico { font-size: 1.05rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45)); }
.hero-show-toggle-flecha { font-size: 1.1rem; font-weight: 900; line-height: 1; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
#hero-finance[data-vista="show"] .hero-show-toggle-flecha { transform: rotate(180deg); }
@media (min-width: 640px) { #hero-finance.hero-r173 { height: 11rem; } }
@media (prefers-reduced-motion: reduce) {
  #hero-finance.hero-r173 .hero-vistas > *, .hero-show-toggle, .hero-show-toggle-flecha { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 174 · ESTADÍSTICAS DEL SHOW «CLEAN»
 * · Sin barra de desplazamiento: el contenido compacto entra en la caja fija.
 * · Paleta del Show (magenta / neón) en cuanto se pasa a esa vista, para
 *   distinguirla al instante de los ingresos del Dashboard.
 * · La flecha no se mueve al pasar el mouse (solo brillo); comprime al tocar.
 * ════════════════════════════════════════════════════════════════════════ */
#hero-finance.hero-r173 .hero-vista-show { overflow: hidden !important; scrollbar-width: none; }
#hero-finance.hero-r173 .hero-vista-show::-webkit-scrollbar { display: none; }
#hero-finance.hero-r173 .hero-vista-show .power-label { margin-bottom: 0.15rem; }
.hero-show-total { margin: 0; font-size: 1.65rem; line-height: 1.1; font-weight: 900; color: #ffd6f3;
  text-shadow: 0 0 14px rgba(255, 46, 196, 0.55); font-variant-numeric: tabular-nums; }
.hero-show-filas { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; }
.hero-show-fila { display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto minmax(0, 1fr); align-items: center; gap: 0.5rem;
  padding: 0.22rem 0.5rem; border-radius: 0.6rem; font-size: 0.72rem; color: #f4f4f5;
  background: rgba(255, 46, 196, 0.07); border: 1px solid rgba(255, 46, 196, 0.28); }
.hero-show-fila > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-show-fila-tit { color: #ff9be4; font-weight: 800; }
.hero-show-fila b { font-variant-numeric: tabular-nums; }
.hero-show-fila-monto { text-align: right; color: #ffd6f3; font-weight: 700; }
.hero-show-pie { margin: 0.3rem 0 0; font-size: 0.64rem; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hero-finance.hero-r173[data-vista="show"] {
  border-color: rgba(255, 46, 196, 0.55) !important;
  box-shadow: 0 0 22px rgba(255, 46, 196, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 46, 196, 0.10), transparent 60%), rgba(9, 9, 11, 0.85) !important;
}
#hero-finance.hero-r173[data-vista="show"] .hero-vista-show .power-label { color: #ff7ad9 !important; }
#hero-finance.hero-r173 { transition: border-color 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1); }
#hero-finance[data-vista="show"] .hero-show-toggle {
  color: #ffd6f3; border-color: rgba(255, 46, 196, 0.6);
  background: linear-gradient(180deg, rgba(255, 46, 196, 0.18), rgba(255, 46, 196, 0.04)), rgba(13, 13, 18, 0.8);
  box-shadow: 0 0 14px rgba(255, 46, 196, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero-show-toggle, .hero-show-toggle:hover, .hero-show-toggle:focus-visible { transform: translateY(-50%) !important; }
.hero-show-toggle:hover { filter: brightness(1.2); }
.hero-show-toggle:active { transform: translateY(-50%) scale(0.95) !important; }
.hero-show-toggle { transition: filter 120ms cubic-bezier(0.16, 1, 0.3, 1); animation: none !important; }

/* R174 · el rótulo del show en UNA línea: si se parte en dos empuja el pie
 * fuera de la caja fija. */
#hero-finance.hero-r173 .hero-vista-show .power-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* R174 · más compacto en vertical: total, filas y pie caben en la caja fija
 * también en escritorio (donde la etiqueta y el padding son más altos). */
#hero-finance.hero-r173 .hero-show-total { font-size: 1.4rem; }
#hero-finance.hero-r173 .hero-show-filas { gap: 0.2rem; margin-top: 0.2rem; }
#hero-finance.hero-r173 .hero-show-fila { padding-top: 0.12rem; padding-bottom: 0.12rem; }
#hero-finance.hero-r173 .hero-show-pie { margin-top: 0.2rem; }

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 184 · CYBER PULSE — MODALES SIN REJILLA (v240)
 * ──────────────────────────────────────────────────────────────────────────
 * Dirección: los popups de Cyber Pulse llevaban una textura gris de rejilla
 * (el barrido de 3 px `--cp-barrido` sobre el panel, más las pistas de 34 px
 * de `.pf-section::before` cuando una sección vive DENTRO de un modal) y se
 * leían sucios. Ahora la ventana emergente es vidrio oscuro translúcido
 * LISO con borde neón estilizado: filo cian → violeta, biseles de 45° y un
 * solo reflejo especular. Las tarjetas del panel (fuera de modales)
 * conservaban su carbono y sus pistas (la R186 los quita también: ver abajo).
 * Mismo selector que R146 (dos `:not(#…)`), más abajo: gana por orden.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(
  .pw-overlay:not(.hidden) .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container,
  dialog[open], .pp-modal-caja, .mc-panel, .exito-card
) {
  background-color: rgba(3, 8, 15, 0.9) !important;
  background-image:
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-cian), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-violeta), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(90deg, transparent, rgba(var(--cp-cian), 0.85) 18%, rgba(var(--cp-violeta), 0.75) 82%, transparent),
    linear-gradient(90deg, transparent, rgba(var(--cp-violeta), 0.45) 30%, rgba(var(--cp-cian), 0.4) 70%, transparent),
    linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 18%, transparent 32%),
    linear-gradient(180deg, rgba(var(--cp-cian), 0.05), transparent 40%, rgba(var(--cp-violeta), 0.06)) !important;
  background-size: var(--cp-bisel) var(--cp-bisel), var(--cp-bisel) var(--cp-bisel), 100% 1px, 100% 1px, 100% 100%, 100% 100% !important;
  background-position: top left, bottom right, top center, bottom center, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(var(--cp-cian), 0.6) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cp-cian), 0.22),
    inset 0 0 22px rgba(var(--cp-cian), 0.14),
    inset 0 -18px 30px -22px rgba(var(--cp-violeta), 0.55),
    inset 0 1px 0 rgba(236, 254, 255, 0.32),
    0 0 18px rgba(var(--cp-cian), 0.22) !important;
}
@media (pointer: fine) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(
      .pw-overlay:not(.hidden) .pw-panel, .pw-modal, .pw-modal-box, .pw-modal-content, .modal-card, .modal-container,
      dialog[open], .pp-modal-caja, .mc-panel, .exito-card
    ) { background-color: rgba(3, 8, 15, 0.7) !important; }
  }
}
/* Dentro de un modal, las secciones del perfil no repiten la rejilla de
   pistas ni el corte de 34 px: el modal ya es el marco. */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(.pw-overlay, .pw-modal, .pw-modal-box, dialog) :is(.pf-section, .pf-hero) {
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(.pw-overlay, .pw-modal, .pw-modal-box, dialog) :is(.pf-section, .pf-hero)::before,
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(.pw-overlay, .pw-modal, .pw-modal-box, dialog) :is(.pf-section, .pf-hero)::after {
  background-image: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 186 · CYBER PULSE — CRISTAL OSCURO PULIDO EN TODA SUPERFICIE (v242)
 * ──────────────────────────────────────────────────────────────────────────
 * Dirección: la R184 limpió los modales pero las tarjetas, cuadros, widgets
 * y hojas seguían con una textura gris de cuadrícula. Sus fuentes eran:
 *   1. `--cp-carbono` (dos tramas de 45° de 4 px) + `--cp-barrido` (líneas de
 *      3 px) en los paneles de R144 → redefinidas en su origen (arriba) como
 *      vidrio liso.
 *   2. La familia «neo» de power-alfa.css (`--sk-tex`, rejilla de 24 px) en
 *      .pf-section, .curso-stat-box, .alumno-card, .rpg-card, hojas… → se
 *      reemplaza abajo por un reflejo especular SOLO para Cyber Pulse (Neon
 *      Overdrive y el resto de «neo» conservan la suya).
 *   3. power-skins.css (perfil): pistas de 34 px en .pf-section::before,
 *      carbono en .pf-hero/.pf-section y barrido de 3 px en body::after →
 *      quitados en su origen.
 *   4. El barrido de 3 px del hotbar del perfil (estilo en línea de
 *      perfil.html) → anulado abajo para Cyber Pulse.
 * Receta (AGENTS §6.4): relleno oscuro translúcido + reflejo especular,
 * borde neón 1px rgba(cian, .5) y resplandor 14 px rgba(cian, .3). El bisel
 * a 45° (clip-path) sigue siendo la identidad: como recorta la sombra
 * exterior, el resplandor se dibuja también por dentro. Sin backdrop-filter
 * (la poda R90 manda en táctil). La oblea de cyber-pulse-fx.js sigue siendo
 * el FONDO de la página, nunca la superficie de un panel.
 * ════════════════════════════════════════════════════════════════════════ */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud {
  /* 0.9 y no menos: con 0.86 las pistas de la oblea asomaban como líneas
     sobre la tarjeta (medido en captura), que es justo lo que se quitó. */
  --cp-vidrio: rgba(6, 10, 18, 0.9);
  --cp-especular: linear-gradient(180deg, rgba(236, 254, 255, 0.07) 0%, rgba(236, 254, 255, 0.014) 20%, transparent 44%);
  --cp-tinte: linear-gradient(160deg, rgba(var(--cp-cian), 0.07), transparent 40%, rgba(var(--cp-violeta), 0.08) 100%);
  /* Superficies «neo» de power-alfa.css: mismo vidrio, sin la rejilla de 24 px. */
  --sk-vidrio: var(--cp-vidrio);
  --sk-tex: var(--cp-especular), var(--cp-tinte);
  --sk-tex-size: 100% 100%, 100% 100%;
  --sk-borde: rgba(var(--cp-cian), 0.5);
  --sk-bisel-hi: rgba(236, 254, 255, 0.24);
  --sk-anillo: transparent;
  --sk-halo: 0 0 14px rgba(var(--cp-cian), 0.3);
  --sk-esquina-color: rgba(var(--cp-cian), 0.95);
}
/* Paneles del panel (NO modales: esos son de la R184). */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud :is(
  .boveda-panel, .power-card, .power-panel, .power-stat-card, .power-monitor,
  :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/"])
) {
  background-color: var(--cp-vidrio) !important;
  background-image:
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-cian), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(135deg, transparent calc(50% - 1.5px), rgba(var(--cp-violeta), 0.95) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(90deg, transparent, rgba(var(--cp-cian), 0.8) 18%, rgba(var(--cp-violeta), 0.7) 82%, transparent),
    var(--cp-especular),
    var(--cp-tinte) !important;
  background-size: var(--cp-bisel) var(--cp-bisel), var(--cp-bisel) var(--cp-bisel), 100% 1px, 100% 100%, 100% 100% !important;
  background-position: top left, bottom right, top center, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(var(--cp-cian), 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--cp-cian), 0.12),
    inset 0 0 14px rgba(var(--cp-cian), 0.16),
    inset 0 -18px 30px -24px rgba(var(--cp-violeta), 0.55),
    inset 0 1px 0 rgba(236, 254, 255, 0.28),
    0 0 14px rgba(var(--cp-cian), 0.3) !important;
}
/* Hotbar del perfil: el barrido de 3 px en línea cede al vidrio. */
html:not(#pa-nunca):not(#pa-cp)[data-power-accent="cyan"] body.power-hud .hud-hotbar {
  background: var(--cp-especular), var(--cp-vidrio) !important;
  border-color: rgba(var(--cp-cian), 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(236, 254, 255, 0.2), inset 0 0 14px rgba(var(--cp-cian), 0.12), 0 0 14px rgba(var(--cp-cian), 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 187 · COBROS: ÍCONOS SVG, «DUPLICAR ÚLTIMA VENTA» Y TIQUETES DE LA
 * BÓVEDA (v243)
 * ──────────────────────────────────────────────────────────────────────────
 * · `.pw-ico`: trazo SVG de assets/js/core/power-icons.js (viewBox 24,
 *   currentColor). Mide 1em: el tamaño lo da el texto que lo rodea.
 * · Registrar Pago: botón «Duplicar última venta» bajo la alumna elegida y el
 *   modal del historial (`#dup-modal`): cristal obsidiana con bisel de oro
 *   latón, carmesí de Facturación en la acción principal.
 * · Dashboard: mini pop-up de tiquetes de la Bóveda (`#boveda-tiquetes-modal`),
 *   un talón por butaca agrupado por función, oro para VIP y cian para General.
 * Solo se animan transform / opacity / filter con las curvas oficiales
 * (§6.1-§6.2); controles de 44 px declarados en su regla base (§6.4); sin
 * tramas repeating-* (Cyber Pulse R186).
 * ════════════════════════════════════════════════════════════════════════ */
.pw-ico {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.14em;
  overflow: visible;
}
[data-pw-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.pw-ico--gira { animation: pwIcoGira 900ms cubic-bezier(0.16, 1, 0.3, 1) infinite; transform-origin: 50% 50%; }
/* El giro pwIcoGira se declara ANTES del bloque de la batería R168: r168b
   audita como de la batería toda animación declarada desde ese rótulo. */
@media (prefers-reduced-motion: reduce) { .pw-ico--gira { animation-duration: 2400ms; } }

/* Ícono del modal de éxito (antes fa-check / fa-clock). */
.rp-exito-ico { font-size: 1.6rem; }
.rp-exito-ico .pw-ico { stroke-width: 2.2; }
/* Lupa del buscador de alumnas: el contenedor es absoluto, el svg centrado. */
.rp-ico-lupa { pointer-events: none; }
/* Con la alumna elegida el buscador se oculta: su lupa también (antes quedaba flotando). */
.relative:has(> #student-search.hidden) > .rp-ico-lupa { display: none; }

/* ── Registrar Pago · botón «Duplicar última venta» ───────────────────── */
.rp-dup-abrir {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  border-radius: 1rem;
  color: #fde68a;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background:
    linear-gradient(180deg, rgba(255, 236, 190, 0.08) 0%, transparent 42%),
    rgba(13, 13, 18, 0.86);
  border: 1px solid rgba(200, 170, 110, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.18), inset 0 -10px 18px -14px rgba(239, 68, 68, 0.45), 0 0 14px rgba(251, 191, 36, 0.16);
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-dup-abrir:not(.hidden) { display: flex; }
.rp-dup-abrir:hover { filter: brightness(1.12) drop-shadow(0 0 6px rgba(251, 191, 36, 0.25)); }
.rp-dup-abrir:active { transform: scale(0.95); }
.rp-dup-abrir:focus-visible { outline: 2px solid rgba(251, 191, 36, 0.7); outline-offset: 2px; }
.rp-dup-abrir-ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 0.8rem;
  font-size: 1.15rem;
  color: #fef3c7;
  background: radial-gradient(circle at 35% 30%, rgba(251, 191, 36, 0.35), rgba(239, 68, 68, 0.14) 72%);
  border: 1px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}
.rp-dup-abrir-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.rp-dup-abrir-txt b { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fef3c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-dup-abrir-txt small { font-size: 0.66rem; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-dup-abrir-flecha { flex: 0 0 auto; font-size: 1.05rem; opacity: 0.7; }

/* ── Registrar Pago · modal «Duplicar venta» ──────────────────────────── */
.rp-dup-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 28%),
    rgba(13, 13, 18, 0.92);
  border: 1px solid rgba(200, 170, 110, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.16), 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 28px rgba(251, 191, 36, 0.14);
}
.rp-dup-panel .pw-panel-head,
.rp-dup-panel .pw-panel-foot { background: rgba(9, 9, 12, 0.7); border-color: rgba(255, 255, 255, 0.07); }
.rp-dup-head { align-items: flex-start; }
.rp-dup-kicker { margin: 0; display: flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fbbf24; }
.rp-dup-titulo { margin: 0.15rem 0 0; font-size: 1.1rem; font-weight: 800; color: #fff; }
.rp-dup-sub { margin: 0.2rem 0 0; font-size: 0.72rem; color: #a1a1aa; line-height: 1.4; }
.rp-dup-x {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #a1a1aa;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-dup-x:active { transform: scale(0.95); }
.rp-dup-list { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; }
.rp-dup-list > * { min-width: 0; }
.rp-dup-venta {
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.rp-dup-venta.is-ultima {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14), 0 0 14px rgba(251, 191, 36, 0.18);
}
.rp-dup-venta.is-bloqueada { opacity: 0.72; }
.rp-dup-venta-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; min-width: 0; }
.rp-dup-fecha { display: inline-flex; align-items: center; gap: 0.3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #e4e4e7; }
.rp-dup-total { margin-left: auto; font-size: 0.95rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.rp-dup-chip { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid; }
.rp-dup-chip--ok { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.08); }
.rp-dup-chip--pend { color: #fcd34d; border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
.rp-dup-chip--no { color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
.rp-dup-chip--oro { color: #fef3c7; border-color: rgba(251, 191, 36, 0.6); background: rgba(251, 191, 36, 0.14); box-shadow: 0 0 8px rgba(251, 191, 36, 0.25); }
.rp-dup-lineas { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rp-dup-linea { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; min-width: 0; font-size: 0.76rem; color: #e4e4e7; }
.rp-dup-linea.is-fuera { opacity: 0.5; }
.rp-dup-item { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; overflow-wrap: anywhere; }
.rp-dup-item small { font-size: 0.66rem; color: #a1a1aa; line-height: 1.35; }
.rp-dup-item .rp-dup-fuera-txt { color: #fcd34d; }
.rp-dup-precio { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #fca5a5; }
.rp-dup-aviso,
.rp-dup-bloq,
.rp-dup-vacio,
.rp-dup-cargando { margin: 0.5rem 0 0; display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.72rem; line-height: 1.4; min-width: 0; }
.rp-dup-aviso { color: #fcd34d; }
.rp-dup-bloq { color: #a1a1aa; }
.rp-dup-vacio, .rp-dup-cargando { color: #a1a1aa; justify-content: center; padding: 1.4rem 0.5rem; }
.rp-dup-aviso .pw-ico, .rp-dup-bloq .pw-ico, .rp-dup-vacio .pw-ico, .rp-dup-cargando .pw-ico { margin-top: 0.1rem; }
.rp-dup-foot { display: flex; gap: 0.5rem; }
.rp-dup-btn {
  min-height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 0.9rem;
  border-radius: 0.85rem;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-dup-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-dup-btn:active:not(:disabled) { transform: scale(0.95); }
.rp-dup-btn:disabled { opacity: 0.4; cursor: default; }
.rp-dup-foot .rp-dup-btn { flex: 1 1 0; }
.rp-dup-btn--sec { color: #e4e4e7; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.rp-dup-btn--pri,
.rp-dup-btn--clon {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%), rgba(185, 28, 28, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.3), 0 0 14px rgba(239, 68, 68, 0.3);
}
.rp-dup-btn--clon { width: 100%; margin-top: 0.6rem; }
.rp-dup-btn--pri:hover:not(:disabled), .rp-dup-btn--clon:hover { filter: brightness(1.1); }

/* Carrito: líneas que vienen de un duplicado. */
.rp-clon-tag { margin-top: 0.3rem; display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.6rem; font-weight: 700; color: #fde68a; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.35); }
.rp-clon-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-clon-tag--revisar { color: #fca5a5; background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.4); }

/* ── Dashboard · Bóveda: íconos de la barra y del 🗑️ ─────────────────── */
.feed-venta-ini.feed-show-ico .pw-ico { font-size: 1.15rem; }
.boveda-fbtn [data-pw-icon], .bv-ico-titulo { margin-right: 0.15rem; }
.bv-ico-titulo { color: #fbbf24; vertical-align: -0.12em; }
.boveda-periodo-btn .pw-ico { font-size: 1.15rem; }

/* ── Dashboard · mini pop-up de tiquetes de la Bóveda ─────────────────── */
.bv-tiq-panel {
  width: min(30rem, 100%) !important;
  max-height: min(86vh, 100dvh) !important;
  padding: 0;
  border-radius: 1.2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 26%),
    rgba(10, 10, 14, 0.94);
  border: 1px solid rgba(34, 211, 238, 0.42);
  box-shadow: inset 0 1px 0 rgba(236, 254, 255, 0.14), 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 26px rgba(34, 211, 238, 0.16);
}
.bv-tiq-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 0.95rem 0.6rem; min-width: 0; }
.bv-tiq-kicker { margin: 0; display: flex; align-items: center; gap: 0.35rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #67e8f9; }
.bv-tiq-h { margin: 0.15rem 0 0; font-size: 1.02rem; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.bv-tiq-x {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #a1a1aa;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bv-tiq-x:active { transform: scale(0.95); }
.bv-tiq-resumen { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.95rem 0.6rem; min-width: 0; }
.bv-tiq-resumen > span { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; color: #cffafe; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.3); }
.bv-tiq-resumen > .bv-tiq-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #a1a1aa; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.bv-tiq-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.2rem 0.95rem 0.8rem; display: flex; flex-direction: column; gap: 0.8rem; }
.bv-tiq-grupo { min-width: 0; }
.bv-tiq-grupo-tit { margin: 0 0 0.45rem; display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fde68a; min-width: 0; }
.bv-tiq-grupo-tit > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-tiq-grupo-tit em { margin-left: auto; font-style: normal; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.bv-tiq-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 0.5rem; min-width: 0; }
.bv-tiq-grilla > * { min-width: 0; }
.bv-tiq {
  --tiq: 34, 211, 238;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 84px;
  border-radius: 0.8rem;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(var(--tiq), 0.14) 0%, rgba(13, 13, 18, 0.92) 46%, rgba(244, 63, 94, 0.08) 100%),
    #0d0d12;
  border: 1px solid rgba(var(--tiq), 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(var(--tiq), 0.18);
}
.bv-tiq--vip { --tiq: 251, 191, 36; }
.bv-tiq-cuerpo { flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.55rem 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.2rem; }
.bv-tiq-show { margin: 0; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--tiq)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-tiq-funcion, .bv-tiq-titular { margin: 0; display: flex; align-items: center; gap: 0.3rem; min-width: 0; font-size: 0.7rem; color: #e4e4e7; }
.bv-tiq-titular { color: #a1a1aa; }
.bv-tiq-funcion > span, .bv-tiq-titular > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-tiq-talon {
  position: relative;
  flex: 0 0 4.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.3rem;
  border-left: 2px dashed rgba(var(--tiq), 0.55);
  background: rgba(var(--tiq), 0.07);
}
/* Muescas de la línea de corte: dos círculos del color del fondo del modal. */
.bv-tiq-talon::before,
.bv-tiq-talon::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(10, 10, 14);
  border: 1px solid rgba(var(--tiq), 0.5);
}
.bv-tiq-talon::before { top: -7px; }
.bv-tiq-talon::after { bottom: -7px; }
.bv-tiq-tipo { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--tiq)); white-space: nowrap; }
.bv-tiq-butaca { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; font-weight: 900; color: #fff; letter-spacing: 0.02em; text-shadow: 0 0 10px rgba(var(--tiq), 0.55); }
.bv-tiq-seat { font-size: 0.95rem; color: rgba(var(--tiq), 0.85); }
.bv-tiq-vacio { margin: 1rem 0; font-size: 0.78rem; color: #a1a1aa; text-align: center; }
.bv-tiq-pie { flex: 0 0 auto; display: flex; gap: 0.5rem; padding: 0.7rem 0.95rem 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.bv-tiq-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.7rem;
  border-radius: 0.85rem;
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bv-tiq-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-tiq-btn:active { transform: scale(0.95); }
.bv-tiq-btn--sec { color: #cffafe; background: rgba(34, 211, 238, 0.06); border: 1px solid rgba(34, 211, 238, 0.4); }
.bv-tiq-btn--pri { color: #1a1206; background: linear-gradient(180deg, #fde68a, #f59e0b); border: 1px solid rgba(255, 236, 190, 0.7); box-shadow: 0 0 14px rgba(251, 191, 36, 0.3); }
.bv-tiq-btn:hover { filter: brightness(1.1); }