:root {
  --cu-font-family: 'Roboto', sans-serif;
  --cu-color-bg: #0F69C4;
  --cu-color-bg-hover: #0B4E91;
  --cu-color-bg-active: #07305A;
  --cu-color-text: #FFFFFF;
  --cu-color-focus-outline: #FFBE5C;
  --cu-color-bg-hc: #625AF6;
  --cu-color-bg-hover-hc: #4943B6;
  --cu-color-bg-active-hc: #2D2971;
  --cu-color-focus-outline-hc: #D8D7FA;
}

/* 1. ESTILO BASE DEL BOTÓN */
.cu-btn {
  display: inline-flex;
  align-items: center;
  height: 48px !important;
  justify-content: center;
  padding: 4px 14px;
  border: none;
  border-radius: 4px;
  font-family: var(--cu-font-family);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cu-color-text) !important;
  text-decoration: none !important;
  line-height: 1.5;
  background-color: var(--cu-color-bg);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  white-space: nowrap;
  box-sizing: border-box;
}

.cu-btn:hover {
  background-color: var(--cu-color-bg-hover);
  color: var(--cu-color-text) !important;
}
.cu-btn:active {
  background-color: var(--cu-color-bg-active);
}
.cu-btn:focus-visible,
.claveunica-shortcode-button-wrapper a.cu-btn:focus-visible {
  background-color: var(--cu-color-bg-hover);
  outline: 4px solid var(--cu-color-focus-outline) !important;
  outline-offset: 2px !important;
}

/* ÍCONO */
.cu-btn .cu-icon {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  color: var(--cu-color-text);
}

/* 2. MODIFICADORES */
.cu-btn.cu-rounded-0 { border-radius: 0px; }
.cu-btn.cu-rounded-pill { border-radius: 99px; }
.cu-btn.cu-btn-full-width { width: 100%; }
.cu-btn.cu-btn-mobile { padding: 12px 8px; font-size: 0.9rem; }
.cu-btn.cu-btn-mobile .cu-icon { width: 18px; height: 18px; }
.cu-btn.cu-btn-mobile:active { background-color: #00254D; }

/* 3. CONTENEDOR DEL SHORTCODE */
.claveunica-shortcode-button-wrapper {
  max-width: 400px;
  margin: 1em auto;
}

.cu-btn.cu-high-contrast {
  background-color: var(--cu-color-bg-hc);
}

.cu-btn.cu-high-contrast:hover {
  background-color: var(--cu-color-bg-hover-hc);
}

.cu-btn.cu-high-contrast:active {
  background-color: var(--cu-color-bg-active-hc);
}

.cu-btn.cu-high-contrast:focus-visible,
.claveunica-shortcode-button-wrapper a.cu-btn.cu-high-contrast:focus-visible {
  background-color: var(--cu-color-bg-hover-hc);
  outline: 4px solid var(--cu-color-focus-outline-hc) !important;
}