.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #747775;
  border-radius: 20px;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  height: 45px; /* Altura predeterminada */
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 16px;
  text-align: center;
  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  white-space: nowrap;
  width: 100%; /* Para que ocupe todo el ancho del contenedor */
  max-width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto; /* Centrado */
}

/* Icono del botón */
.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 8px;
  min-width: 20px;
  width: 20px;
}

/* Contenido interno del botón */
.gsi-material-button .gsi-material-button-content-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

/* Texto del botón */
.gsi-material-button .gsi-material-button-contents {
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Estados deshabilitado y hover */
.gsi-material-button:disabled {
  cursor: default;
  background-color: #13131461;
  border-color: #8e918f1f;
  opacity: 0.6;
}

.gsi-material-button:not(:disabled):hover {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  background-color: #181818;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 678px) {
  .gsi-material-button {
      font-size: 12px; /* Reducir tamaño de fuente */
      height: 40px; /* Reducir altura */
      padding: 0 12px; /* Ajustar padding */
  }

  .gsi-material-button .gsi-material-button-icon {
      margin-right: 6px; /* Ajustar espaciado del icono */
  }
}