/* Piel del botón — los cuatro tokens opcionales del tema: buttonFill,
   buttonShadow, buttonColor y buttonTextColor. La plantilla es el punto de
   partida; estos tokens la corrigen sin salirse del tema activo.

   Sin tokens, .wb-root no lleva ningún data-btn-* y este archivo no aplica NADA:
   los cuatro temas se ven exactamente igual que antes de existir. Se carga
   DESPUÉS de themes.css (el override del dueño le gana al tema) y ANTES de
   brands.css (la identidad de marca es un opt-in por bloque y sigue mandando).

   Alcance: los bloques con forma de botón — cta, link, membresía y horario.
   Quedan fuera los bloques de contenido (heading/text/spacer) y los dos que
   core.css ya declara sin cromo (socials es una fila de círculos, marquee es una
   cinta a sangre): el mismo :not(:where(…)) que repite cada tema.

   Especificidad, a propósito y solo hasta donde hace falta: la cadena
   `.wb-root[data-btn-*] .wb-blocks[data-layout] :is(.wb-block, .wb-cta)` pesa
   (0,5,0), que es lo que pide la regla más específica de themes.css
   (`.theme-sticker.mode-dark .wb-blocks > .wb-link:nth-child(even)`, también
   (0,5,0), desempatada por orden de carga). El :not() va dentro de :where() para
   no sumar de más — es la lección del incidente en que un :not() suelto aplastó
   las reglas de tema. */

/* ---- 1 · buttonColor: el fondo del botón (borde y sombra siguen siendo del tema) ---- */
.wb-root[data-btn-color] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  background: var(--wb-btn-color);
}

/* ---- 2 · buttonFill: cómo se rellena ----
   Va después del color para que `outline` pueda vaciar el fondo aunque haya
   buttonColor: ahí el color entra como tinta del borde, no como relleno. */
.wb-root[data-btn-fill="solid"] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  background: var(--wb-btn-color, var(--wb-accent));
  /* transparente y no `none`: el ancho del borde se queda, así el botón no cambia de tamaño */
  border-color: transparent;
  color: var(--wb-btn-text, #fff);
}
/* sobre un botón lleno, los detalles que el tema pinta en acento (o en gris de
   etiqueta) quedarían del color del propio fondo: siguen al texto del botón */
.wb-root[data-btn-fill="solid"] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) :is(.wb-link-icon, .wb-membership-note, .wb-membership-price, .wb-schedule-label) {
  color: inherit;
}

/* el borde completo: un tema puede no tener ninguno (el horario del spa) y sin
   fondo ni borde el botón desaparecería */
.wb-root[data-btn-fill="outline"] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  background: transparent;
  border: 2px solid var(--wb-btn-color, var(--wb-accent));
  /* el CTA viene con texto blanco de core.css: sobre un fondo vaciado hay que
     devolverlo a la tinta del tema o desaparece en los temas claros */
  color: var(--wb-btn-text, inherit);
}

.wb-root[data-btn-fill="soft"] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  background: color-mix(in srgb, var(--wb-btn-color, var(--wb-accent)) 15%, transparent);
  border-color: color-mix(in srgb, var(--wb-btn-color, var(--wb-accent)) 32%, transparent);
  color: var(--wb-btn-text, inherit);
}

/* ---- 3 · buttonTextColor: la tinta del botón (gana sobre la que fije el relleno) ---- */
.wb-root[data-btn-text] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  color: var(--wb-btn-text);
}

/* ---- 4 · buttonShadow ---- */
.wb-root[data-btn-shadow="none"] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  box-shadow: none;
}
/* difusa: teñida con el acento para que también se lea sobre los temas oscuros,
   donde una sombra negra es invisible. La primera declaración es el respaldo
   para navegadores sin color-mix. */
.wb-root[data-btn-shadow="soft"] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--wb-accent) 62%, transparent);
}
/* dura: la sombra sólida desplazada del sticker, en la tinta del tema activo —
   grafito en los modos claros, blanco en los oscuros */
.wb-root[data-btn-shadow="hard"] .wb-blocks[data-layout] :is(.wb-block, .wb-cta):not(:where(.wb-heading, .wb-text, .wb-spacer, .wb-socials, .wb-marquee)) {
  box-shadow: 4px 4px 0 var(--wb-fg);
}