/* ----------------------------------------- */
/* Estilo para el botón “Nieve Fresca”       */
/* ----------------------------------------- */

.icono-copo {
  width: 25px;
  height: 25px;
}


.boton-nieve {
  /* Hacemos que el ancho se ajuste al contenido */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Degradado en tonos hielo */
  background: linear-gradient(135deg, #a8d8ff, #71bfff);

  /* Texto en azul oscuro para buen contraste */
  color: #003f6b;
  font-weight: 600;
  font-size: 1em;

  /* Espacio interno generoso */
  padding: 12px 20px;

  /* Bordes redondeados suaves */
  border-radius: 6px;

  /* Sombra leve para “flotar” sobre el fondo */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

  /* Sin borde explícito */
  border: none;

  /* Transiciones suaves */
  transition: background 0.2s ease, box-shadow 0.2s ease;

  /* Que el botón tenga solo el ancho necesario */
  width: auto;
  max-width: fit-content; /* para navegadores modernos */

  /* Evitar que herede ancho completo de algún contenedor */
  white-space: nowrap;

  cursor: pointer;
}

/* Si usas un icono dentro */
.boton-nieve .icono-copo {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Hover (escritorio) */
.boton-nieve:hover {
  background: linear-gradient(135deg, #8ecfff, #57a9ff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* Active / Touch (móvil): efecto “hundido” */
.boton-nieve:active {
  background: linear-gradient(135deg, #76bfff, #4093ff);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Focus (accesibilidad) */
.boton-nieve:focus {
  outline: 2px solid #003f6b;
  outline-offset: 2px;
}

/* En caso de que lo tengas en un contenedor centrado */
.contenedor-boton {
  text-align: center; /* centra los inline-flex */
  margin: 20px 0;     /* separación arriba y abajo */
}