:root {

  /* tamaños */
  --btn-height: 44px;
  --btn-height-sm: 30px;

  /* anchos */
  --btn-width-md: 160px;
  --btn-width-sm: 120px;
  --btn-width-xs: 70px;

  /* forma */
  --btn-radius: 999px;

}


/* ===== WIDTH ===== */

.btn-width-md {
  width: var(--btn-width-md);
}

.btn-width-sm {
  width: var(--btn-width-sm);
}

.btn-width-fluid {
  width: clamp(140px, 20vw, 200px);
}

/* ===== SIZE ===== */

.btn-sm {
  height: var(--btn-height-sm);
  font-size: .875rem;
}

/* ===== ICON HELPERS ===== */

.btn_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  font-size: 14px;
  line-height: 1;

  margin-left: auto;
  flex-shrink: 0;
}

.boton_icon {
  gap: 20px;
}


/* base de los botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--btn-height);
  padding: 0 1rem;

  border: none;
  border-radius: var(--btn-radius);

  font-family: inherit;
  font-weight: var(--fw-regular);

  cursor: pointer;
  text-align: center;
  white-space: nowrap;

  transition:
    background-color .2s ease,
    transform .1s ease;
}

/* ===== BOTÓN PRINCIPAL ===== */

.t4b-btn.btn.btn-default,
.boton_principal {
  background: var(--color-principal-500);
  color: var(--color-blanco);
}

.boton_pequeno_icon {
  display: flex;
  gap: 10px;
}


/* variantes y estados */
/* Hover */
.boton_principal:hover {
  background: var(--color-principal-700);
  color: var(--color-blanco);
}

/* Presionado / Active */
.boton_principal:active {
  color: var(--color-blanco);
  background: var(--color-principal-900);
  transform: scale(0.97);
}

/* Focus */
.boton_principal:focus {
  color: var(--color-blanco);
}

/* Focus accesible (teclado) */
.boton_principal:focus-visible {
  outline: 3px solid var(--color-principal-300);
  outline-offset: 2px;
}


/* Deshabilitado */
.boton_principal:disabled,
.boton_principal[aria-disabled="true"] {
  background: var(--color-secundario-300);
  color: var(--color-secundario-700);

  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 1;
}


/* Evita hover cuando está deshabilitado */
.boton_principal:disabled:hover {
  background: var(--color-neutro-300);
}

a.boton {
  text-decoration: none;
}


/* boton secundario */
.boton-secundario {
  color: var(--color-blanco);
  background: var(--color-secundario-500);
  color: white;
}

.boton-secundario:hover {
  color: var(--color-blanco);
  background: var(--color-secundario-700);
}

.boton-secundario:active {
  color: var(--color-blanco);
  background: var(--color-secundario-900);
}


/* Botón en fondo oscuro */

.bg-dark-demo {
  background-color: var(--color-secundario-500);
  border-radius: 8px;
}

.is-dark.boton {
  background: var(--color-blanco);
  color: var(--color-principal-500);
}

.is-dark.boton:hover {
  background: var(--color-principal-200);
  color: var(--color-secundario-700);
}

.is-dark.boton:active {
  background: var(--color-principal-300);
  color: var(--color-principal-900);
}

/* boton icono */

.boton_icono {
  width: var(--btn-height);
  height: var(--btn-height);
  padding: 0;

  border-radius: 50%;

  display: inline-grid;
  place-items: center;

  background: var(--color-principal-500);
  color: var(--color-blanco);
}

/* Hover */
.boton_icono:hover {
  background: var(--color-principal-700);
}


/* Presionado / Active */
.boton_icono:active {
  background: var(--color-principal-900);
  transform: scale(0.97);
}


/* Focus accesible (teclado) */
.boton_icono:focus-visible {
  outline: 3px solid var(--color-principal-300);
  outline-offset: 2px;
}

.boton_icono:disabled,
.boton_icono[aria-disabled="true"] {
  background: var(--color-secundario-300);
  color: var(--color-secundario-700);

  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 1;
}