/* button-refine.css — refinamiento del CTA `dotted` del design system.
 * Vive en el proyecto (no en _ds/) para no tocar el design system vendorizado
 * y para tener cache-bust con ?v=N como el resto de CSS del sitio.
 *
 * PROBLEMA: en reposo la variante `dotted` pintaba una matriz de puntos grande
 * y de alto contraste (radio 1.5px, paso 6px, en el color sólido del intent).
 * Los puntos corrían POR DEBAJO del texto y competían con él → se veía ruidoso
 * y poco legible ("polka-dot barato"), sobre todo en azure/waiting sobre negro.
 *
 * FIX: la matriz se vuelve FINA y de menor contraste (puntos más pequeños, más
 * separados, semi-transparentes) → lee como textura sutil, el texto manda. En
 * hover se limpia la matriz y entra el fill sólido nítido (ya definido en el DS).
 * !important porque el background-image lo pone el componente como estilo inline.
 *
 * --btn-fill / --btn-on los expone el componente Button por intent.            */

.rmd-btn--dotted {
  background-image:
    radial-gradient(circle at center,
      color-mix(in srgb, var(--btn-fill) 64%, transparent) 1px,
      transparent 1.85px) !important;
  background-size: 7px 7px !important;
}

/* en hover la matriz desaparece y queda el fill sólido (::after del DS) */
.rmd-btn--dotted:hover { background-image: none !important; }