/* ===== Botones: estilo suave =====
   Azul con degradado y halo, y blanco con sombra ligera. Sin brillos 3D ni destellos.
   Se carga el último y sustituye al estilo "perla" de styles.css (para volver atrás basta con quitar este archivo). */

html:root[data-theme] .btn{
  border:0;filter:none;
  transition:translate .35s var(--ease),box-shadow .4s,background-color .35s;
}
html:root[data-theme] .btn::before,
html:root[data-theme] .btn::after,
html:root[data-theme] .btn>span::before,
html:root[data-theme] .btn>span::after{display:none}
html:root[data-theme] .btn .sp{display:none!important}
html:root[data-theme] .btn>span{background:none;overflow:visible;text-shadow:none;filter:none}
html:root[data-theme] .bt,
html:root[data-theme] .btn:hover .bt{transform:none;-webkit-mask-image:none;mask-image:none}
html:root[data-theme] .btn:hover{translate:0 -2px}
html:root[data-theme] .btn:active{translate:0 1px}

/* principal: azul */
html:root[data-theme] .btn.btn--white,
html:root[data-theme] .btn.btn--white:hover,
html:root[data-theme] .btn.btn--blue,
html:root[data-theme] .btn.btn--blue:hover{
  --ink:#fff;color:#fff;
  background-color:#2f6bff;background-image:linear-gradient(180deg,#5d8bff,#2f6bff);
  box-shadow:inset 0 -.6rem 1.2rem rgba(255,255,255,.35),inset 0 -.1rem .3rem rgba(0,0,0,.4),0 10px 36px -10px #2f6bff;
}
html:root[data-theme] .btn.btn--white:hover,
html:root[data-theme] .btn.btn--blue:hover{
  box-shadow:inset 0 -.6rem 1.2rem rgba(255,255,255,.45),inset 0 -.1rem .3rem rgba(0,0,0,.4),0 14px 40px -10px #2f6bff;
}

/* secundario: blanco */
html:root[data-theme] .btn.btn--dark,
html:root[data-theme] .btn.btn--dark:hover{
  --ink:#07070b;color:#07070b;
  background-color:#eceef5;background-image:linear-gradient(180deg,#fff,#eceef5);
  box-shadow:inset 0 -.6rem 1.2rem rgba(255,255,255,.6),inset 0 -.1rem .3rem rgba(0,0,0,.25),0 8px 24px -14px rgba(20,30,70,.35);
}
html:root[data-theme=dark] .btn.btn--dark,
html:root[data-theme=dark] .btn.btn--dark:hover{
  box-shadow:inset 0 -.6rem 1.2rem rgba(255,255,255,.6),inset 0 -.1rem .3rem rgba(0,0,0,.25),0 8px 24px -14px rgba(0,0,0,.8);
}
html:root[data-theme] .btn.btn--dark:hover{
  box-shadow:inset 0 -.6rem 1.2rem rgba(255,255,255,.75),inset 0 -.1rem .3rem rgba(0,0,0,.25),0 12px 28px -14px rgba(20,30,70,.45);
}
html:root[data-theme] .btn.btn--dark svg{stroke:currentColor}

/* botones pequeños (menú): el relieve se reduce a su tamaño */
html:root[data-theme] .btn.btn--sm.btn--white,
html:root[data-theme] .btn.btn--sm.btn--blue{
  box-shadow:inset 0 -.4rem .8rem rgba(255,255,255,.3),inset 0 -.1rem .25rem rgba(0,0,0,.35),0 8px 24px -8px #2f6bff;
}

@media(prefers-reduced-motion:reduce){html:root[data-theme] .btn{transition:none}html:root[data-theme] .btn:hover{translate:none}}