: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 ===== */

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

.boton_principal:hover{
  background:var(--color-principal-700);
}

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


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


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


/* 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{
  background: var(--color-secundario-500);
  color:white;
}

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

.boton-secundario:active{
  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;
}