/* Efectos de “caja” en botones .nav-actions (borde, halo, neón, goma…).
   Clases: .nav-act-box-fx-1 … .nav-act-box-fx-20 sobre el <a class="btn">. */

.nav-actions .btn[class*="nav-act-box-fx-"] {
  transition: box-shadow 0.35s ease, border-color 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

/* 1 · Halo suave */
.nav-actions .btn.nav-act-box-fx-1:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 28px rgba(129, 180, 255, 0.55),
    0 0 48px rgba(167, 139, 250, 0.25);
}

/* 2 · Borde neón cyan */
.nav-actions .btn.nav-act-box-fx-2:hover {
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.85),
    0 0 18px rgba(34, 211, 238, 0.65),
    0 0 36px rgba(34, 211, 238, 0.35);
}

/* 3 · Borde neón magenta */
.nav-actions .btn.nav-act-box-fx-3:hover {
  box-shadow:
    0 0 0 2px rgba(244, 114, 182, 0.9),
    0 0 18px rgba(244, 114, 182, 0.65),
    0 0 40px rgba(236, 72, 153, 0.35);
}

/* 4 · Doble brillo */
.nav-actions .btn.nav-act-box-fx-4:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 14px rgba(96, 165, 250, 0.7),
    0 6px 32px rgba(192, 132, 252, 0.45);
}

/* 5 · Pulso de borde */
@keyframes navBoxFxPulseRing {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.25),
      0 0 12px rgba(99, 102, 241, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(129, 140, 248, 0.35),
      0 0 28px rgba(99, 102, 241, 0.65);
  }
}
.nav-actions .btn.nav-act-box-fx-5:hover {
  animation: navBoxFxPulseRing 1.35s ease-in-out infinite;
}

/* 6 · Cromado / metal */
.nav-actions .btn.nav-act-box-fx-6:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(180, 190, 210, 0.55),
    0 4px 18px rgba(148, 163, 184, 0.45);
}

/* 7 · Aurora (matiz) */
@keyframes navBoxFxAurora {
  0% { filter: hue-rotate(0deg) drop-shadow(0 0 10px rgba(56, 189, 248, 0.6)); }
  50% { filter: hue-rotate(120deg) drop-shadow(0 0 14px rgba(167, 139, 250, 0.55)); }
  100% { filter: hue-rotate(300deg) drop-shadow(0 0 10px rgba(52, 211, 153, 0.55)); }
}
.nav-actions .btn.nav-act-box-fx-7:hover {
  animation: navBoxFxAurora 4s linear infinite;
}

/* 8 · Contorno dorado */
.nav-actions .btn.nav-act-box-fx-8:hover {
  box-shadow:
    0 0 0 2px rgba(212, 175, 55, 0.9),
    0 0 20px rgba(251, 191, 36, 0.55),
    0 4px 28px rgba(180, 83, 9, 0.35);
}

/* 9 · Barrido luminoso (sombra desplazada) */
@keyframes navBoxFxSweepGlow {
  0% { box-shadow: -8px 0 22px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2); }
  50% { box-shadow: 8px 0 26px rgba(147, 197, 253, 0.65), 0 0 0 1px rgba(147, 197, 253, 0.35); }
  100% { box-shadow: -8px 0 22px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2); }
}
.nav-actions .btn.nav-act-box-fx-9:hover {
  animation: navBoxFxSweepGlow 1.8s ease-in-out infinite;
}

/* 10 · Sombra interior profunda */
.nav-actions .btn.nav-act-box-fx-10:hover {
  box-shadow:
    inset 0 3px 14px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 20px rgba(15, 23, 42, 0.65);
}

/* 11 · Borde punteado “vivo” */
@keyframes navBoxFxDashHue {
  0% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.75), 0 0 16px rgba(56, 189, 248, 0.4); }
  33% { box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.8), 0 0 18px rgba(167, 139, 250, 0.45); }
  66% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.75), 0 0 16px rgba(52, 211, 153, 0.4); }
  100% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.75), 0 0 16px rgba(56, 189, 248, 0.4); }
}
.nav-actions .btn.nav-act-box-fx-11:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
  animation: navBoxFxDashHue 2.4s ease infinite;
}

/* 12 · Goma / rebote de caja */
@keyframes navBoxFxRubber {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.06); }
  65% { transform: scale(0.98); }
}
.nav-actions .btn.nav-act-box-fx-12:hover {
  animation: navBoxFxRubber 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 13 · Fuego discreto */
.nav-actions .btn.nav-act-box-fx-13:hover {
  box-shadow:
    0 0 0 1px rgba(251, 113, 133, 0.55),
    0 0 16px rgba(251, 146, 60, 0.55),
    0 6px 28px rgba(220, 38, 38, 0.4),
    0 -2px 18px rgba(253, 224, 71, 0.25);
}

/* 14 · Hielo / escarcha */
.nav-actions .btn.nav-act-box-fx-14:hover {
  box-shadow:
    0 0 0 2px rgba(186, 230, 253, 0.75),
    0 0 22px rgba(125, 211, 252, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 15 · Cable / neón verde */
.nav-actions .btn.nav-act-box-fx-15:hover {
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.95),
    0 0 10px rgba(74, 222, 128, 0.85),
    0 0 28px rgba(22, 163, 74, 0.45);
}

/* 16 · Iris multicolor (sombra) */
@keyframes navBoxFxIrisShadow {
  0% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.7), 0 0 20px rgba(239, 68, 68, 0.35); }
  25% { box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.75), 0 0 22px rgba(234, 179, 8, 0.4); }
  50% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.75), 0 0 22px rgba(34, 197, 94, 0.4); }
  75% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.75), 0 0 22px rgba(59, 130, 246, 0.4); }
  100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.7), 0 0 20px rgba(239, 68, 68, 0.35); }
}
.nav-actions .btn.nav-act-box-fx-16:hover {
  animation: navBoxFxIrisShadow 3.5s linear infinite;
}

/* 17 · Latido */
@keyframes navBoxFxHeartbeat {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.5), 0 0 12px rgba(244, 63, 94, 0.35); }
  15% { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.35), 0 0 32px rgba(244, 63, 94, 0.55); }
  30% { box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.5), 0 0 12px rgba(244, 63, 94, 0.35); }
  45% { box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.45), 0 0 26px rgba(225, 29, 72, 0.5); }
}
.nav-actions .btn.nav-act-box-fx-17:hover {
  animation: navBoxFxHeartbeat 1.4s ease-in-out infinite;
}

/* 18 · Resplandor interior morado */
.nav-actions .btn.nav-act-box-fx-18:hover {
  box-shadow:
    inset 0 0 24px rgba(139, 92, 246, 0.55),
    0 0 0 1px rgba(196, 181, 253, 0.45),
    0 0 22px rgba(109, 40, 217, 0.4);
}

/* 19 · Bisel 3D */
.nav-actions .btn.nav-act-box-fx-19:hover {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 8px rgba(0, 0, 0, 0.45),
    0 4px 0 rgba(15, 23, 42, 0.55),
    0 0 0 1px rgba(148, 163, 184, 0.35);
}

/* 20 · Perímetro alterno */
@keyframes navBoxFxPerimeter {
  0% { box-shadow: 4px 0 0 rgba(96, 165, 250, 0.85), 0 0 16px rgba(96, 165, 250, 0.35); }
  25% { box-shadow: 0 4px 0 rgba(52, 211, 153, 0.85), 0 0 16px rgba(52, 211, 153, 0.35); }
  50% { box-shadow: -4px 0 0 rgba(167, 139, 250, 0.85), 0 0 16px rgba(167, 139, 250, 0.35); }
  75% { box-shadow: 0 -4px 0 rgba(251, 191, 36, 0.85), 0 0 16px rgba(251, 191, 36, 0.35); }
  100% { box-shadow: 4px 0 0 rgba(96, 165, 250, 0.85), 0 0 16px rgba(96, 165, 250, 0.35); }
}
.nav-actions .btn.nav-act-box-fx-20:hover {
  animation: navBoxFxPerimeter 2.2s linear infinite;
}

/* Vista previa admin + simulación hover */
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-1 { box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 0 28px rgba(129,180,255,0.55), 0 0 48px rgba(167,139,250,0.25); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-2 { box-shadow: 0 0 0 2px rgba(34,211,238,0.85), 0 0 18px rgba(34,211,238,0.65), 0 0 36px rgba(34,211,238,0.35); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-3 { box-shadow: 0 0 0 2px rgba(244,114,182,0.9), 0 0 18px rgba(244,114,182,0.65), 0 0 40px rgba(236,72,153,0.35); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-4 { box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(96,165,250,0.7), 0 6px 32px rgba(192,132,252,0.45); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-5 { animation: navBoxFxPulseRing 1.35s ease-in-out infinite; }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-6 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(180,190,210,0.55), 0 4px 18px rgba(148,163,184,0.45); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-7 { animation: navBoxFxAurora 4s linear infinite; }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-8 { box-shadow: 0 0 0 2px rgba(212,175,55,0.9), 0 0 20px rgba(251,191,36,0.55), 0 4px 28px rgba(180,83,9,0.35); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-9 { animation: navBoxFxSweepGlow 1.8s ease-in-out infinite; }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-10 { box-shadow: inset 0 3px 14px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 20px rgba(15,23,42,0.65); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-11 { outline: 2px dashed rgba(255,255,255,0.45); outline-offset: 2px; animation: navBoxFxDashHue 2.4s ease infinite; }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-12 { animation: navBoxFxRubber 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-13 { box-shadow: 0 0 0 1px rgba(251,113,133,0.55), 0 0 16px rgba(251,146,60,0.55), 0 6px 28px rgba(220,38,38,0.4), 0 -2px 18px rgba(253,224,71,0.25); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-14 { box-shadow: 0 0 0 2px rgba(186,230,253,0.75), 0 0 22px rgba(125,211,252,0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-15 { box-shadow: 0 0 0 1px rgba(74,222,128,0.95), 0 0 10px rgba(74,222,128,0.85), 0 0 28px rgba(22,163,74,0.45); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-16 { animation: navBoxFxIrisShadow 3.5s linear infinite; }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-17 { animation: navBoxFxHeartbeat 1.4s ease-in-out infinite; }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-18 { box-shadow: inset 0 0 24px rgba(139,92,246,0.55), 0 0 0 1px rgba(196,181,253,0.45), 0 0 22px rgba(109,40,217,0.4); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-19 { box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -3px 8px rgba(0,0,0,0.45), 0 4px 0 rgba(15,23,42,0.55), 0 0 0 1px rgba(148,163,184,0.35); }
.nav-actions .btn.is-simulated-hover.nav-act-box-fx-20 { animation: navBoxFxPerimeter 2.2s linear infinite; }