/* Efecto StarBorder adaptado a HTML/CSS: no requiere React ni cambia eventos. */
:where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item):not(.btn-close):not(.no-star-border){
  --star-color: rgba(99,102,241,.96);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

:where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item):not(.btn-close):not(.no-star-border)::before,
:where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item):not(.btn-close):not(.no-star-border)::after{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  z-index:3;
  border-radius:inherit;
  pointer-events:none;
  opacity:.96;
  background-repeat:no-repeat;
  background-size:120px 40px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
:where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item):not(.btn-close):not(.no-star-border)::before{
  background-image:radial-gradient(ellipse, var(--star-color) 0%, transparent 68%);
  background-position:-120px -16px;
  animation:cp-star-movement-top 4.8s linear infinite;
}
:where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item):not(.btn-close):not(.no-star-border)::after{
  background-image:radial-gradient(ellipse, var(--star-color) 0%, transparent 68%);
  background-position:calc(100% + 120px) calc(100% + 16px);
  animation:cp-star-movement-bottom 4.8s linear infinite;
}

:where(button, .btn, [role="button"], .btnMini, .btnPrintWhite):not(.btn-close):not(.no-star-border):hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.btn-success,.btn-outline-success{--star-color:rgba(52,211,153,.95)}
.btn-danger,.btn-outline-danger,.danger{--star-color:rgba(251,113,133,.98)}
.btn-warning,.btn-outline-warning{--star-color:rgba(251,191,36,.98)}
.btn-info,.btn-outline-info{--star-color:rgba(34,211,238,.98)}
.btn-primary,.btn-outline-primary,.primary{--star-color:rgba(129,140,248,.98)}
.navbar .nav-link,.dropdown-menu .dropdown-item{--star-color:rgba(167,139,250,.96)}

/* Menú: halo fino independiente. Evita que la animación invada el texto. */
.navbar .nav-link,.dropdown-menu .dropdown-item{overflow:visible!important}
.navbar .nav-link::before,.dropdown-menu .dropdown-item::before{content:none!important}
.navbar .nav-link::after,.dropdown-menu .dropdown-item::after{
  content:""!important;
  position:absolute!important;
  inset:-3px!important;
  width:auto!important;
  height:auto!important;
  padding:1px!important;
  border-radius:9px!important;
  z-index:4!important;
  opacity:.72!important;
  background:linear-gradient(90deg,rgba(99,102,241,.12),var(--star-color),rgba(34,211,238,.95),var(--star-color),rgba(99,102,241,.12))!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  animation:cp-menu-glow 2.8s ease-in-out infinite alternate!important;
  pointer-events:none!important;
}
.navbar .nav-link:hover::after,.navbar .nav-link:focus-visible::after,.dropdown-menu .dropdown-item:hover::after,.dropdown-menu .dropdown-item:focus-visible::after{opacity:1!important;filter:drop-shadow(0 0 5px var(--star-color))}

@keyframes cp-menu-glow{0%{opacity:.22;filter:drop-shadow(0 0 0 transparent)}55%{opacity:.9;filter:drop-shadow(0 0 4px var(--star-color))}100%{opacity:.34;filter:drop-shadow(0 0 1px rgba(34,211,238,.45))}}

@keyframes cp-star-movement-top{0%{background-position:-120px -16px;opacity:.25}35%{opacity:1}100%{background-position:calc(100% + 120px) -16px;opacity:.25}}
@keyframes cp-star-movement-bottom{0%{background-position:calc(100% + 120px) calc(100% + 16px);opacity:.25}35%{opacity:1}100%{background-position:-120px calc(100% + 16px);opacity:.25}}

/* La navegación usa su propio diseño compacto; StarBorder queda para acciones. */
.navbar .nav-link::before,.navbar .nav-link::after,.dropdown-menu .dropdown-item::before,.dropdown-menu .dropdown-item::after{content:none!important;display:none!important;animation:none!important}

@media (prefers-reduced-motion:reduce){
  :where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item):not(.btn-close):not(.no-star-border)::before,
  :where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item):not(.btn-close):not(.no-star-border)::after{animation:none;opacity:.55}
  :where(button, .btn, [role="button"], .btnMini, .btnPrintWhite):not(.btn-close):not(.no-star-border):hover{transform:none}
}

@media print{
  :where(button, .btn, [role="button"], .btnMini, .btnPrintWhite, .navbar .nav-link, .dropdown-menu .dropdown-item)::after{display:none!important}
}
