.mideplan-button-wrapper {
  min-width: 0;
}

.mideplan-button {
  /* Lo pisa cada tamaño; el default cubre un tamaño no reconocido. */
  --mideplan-button-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  border: var(--border-hairline) solid transparent;
  /* Radio = la mitad de la altura de una línea, o sea el mismo pill de siempre
     cuando el botón mide una línea. No se usa --radius-pill (100px) porque en
     un botón alto ese radio en las 4 esquinas dibuja una elipse y el texto
     queda fuera de la curva. Al envolver, el radio se queda fijo y el botón
     degrada a rectángulo redondeado que sí contiene el texto. */
  border-radius: var(--mideplan-button-radius);
  font: var(--text-label);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    filter var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}

.mideplan-button__text {
  min-width: 0;
  /* Tope de línea: con una etiqueta larga el texto envuelve en un bloque
     compacto en vez de estirar el botón a todo el ancho del contenedor. Va
     sobre el texto y no sobre el botón para no pisarle el ancho a quien use
     el componente (cta le fija width:100% en móvil, por ejemplo). */
  max-width: 40ch;
}

.mideplan-button__icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: inherit;
}

.mideplan-button--icono-derecha {
  flex-direction: row-reverse;
}

/* Tamaño */
.mideplan-button--md {
  /* 18.125px de línea + 20px de padding + 2px de borde = 40px de alto. */
  --mideplan-button-radius: 20px;
  padding: 10px var(--spacing-md);
}

.mideplan-button--lg {
  /* 20px de línea + 26px de padding + 2px de borde = 48px de alto. */
  --mideplan-button-radius: 24px;
  padding: 13px var(--spacing-lg);
  font-size: 16px;
}

.mideplan-button--lg .mideplan-button__icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* Tipo: primario = relleno navy. */
.mideplan-button--primario {
  background-color: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.mideplan-button--secundario {
  background-color: var(--surface-card);
  border-color: var(--border-default);
  color: var(--mp-neutral-800);
}

/* Gana especificidad sobre el `a:hover { color }` global de general.css, que si no queda ganando oscurece el texto blanco. */
.mideplan-button--primario:hover,
.mideplan-button--primario:active {
  color: var(--text-on-inverse);
}

.mideplan-button--quiet {
  background-color: transparent;
  border: none;
  padding: 0;
  color: var(--text-link);
}

.mideplan-button--quiet:hover,
.mideplan-button--quiet:active {
  color: var(--text-link-hover);
}

.mideplan-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}