/*
botones.css
Botones del sitio: primario, secundario
y de compra, en forma de pildora.
*/

.btn {
  display: inline-block;
  padding: var(--espacio-3) var(--espacio-6);
  font-family: var(--fuente-principal);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radio-completo);
  cursor: pointer;
  transition: all var(--transicion-normal);
  user-select: none;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: 2px solid var(--color-primario-300);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primario {
  background-color: var(--color-primario-600);
  color: var(--texto-inverso);
  border-color: var(--color-primario-600);
}

.btn-primario:hover:not(:disabled) {
  background-color: var(--color-primario-700);
  border-color: var(--color-primario-700);
  color: var(--texto-inverso);
}

.btn-secundario {
  background-color: transparent;
  color: var(--color-primario-600);
  border-color: var(--color-primario-600);
}

.btn-secundario:hover:not(:disabled) {
  background-color: var(--color-primario-600);
  color: var(--texto-inverso);
}

.btn-comprar {
  background-color: var(--color-acento-600);
  color: var(--texto-inverso);
  border-color: var(--color-acento-600);
  font-size: 1.125rem;
  padding: var(--espacio-4) var(--espacio-8);
}

.btn-comprar:hover:not(:disabled) {
  background-color: var(--color-acento-700);
  border-color: var(--color-acento-700);
  color: var(--texto-inverso);
}