/* SNACK ------------------------------------------------------------------- */

.vending-button-snack {
  display: block !important;
  box-sizing: border-box !important;

  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;

  margin: 2px auto !important; /* centrado horizontal en la celda */

  border-radius: 50% !important;
  text-align: center;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #2c2c2c !important;

  border: 2px solid #8a8a8a !important;

  background: linear-gradient(to bottom,
      #f7f7f7 0%,
      #e9e9e9 45%,
      #dcdcdc 100%) !important;

  box-shadow:
    0 2px 3px rgba(0,0,0,0.25),
    inset 0 2px 2px rgba(255,255,255,0.85),
    inset 0 -2px 3px rgba(0,0,0,0.18);

  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer;
  user-select: none;

  /* ajuste óptico del texto */
/*   padding-top: 1px !important; */
}

.vending-button-snack:active {
  transform: translateY(1px);
}

/* REFRESH ----------------------------------------------------------------------- */

.vending-button-refresh {
  display: inline-block !important;
  box-sizing: border-box !important;

  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;

  margin: 2px auto !important;
  text-align: center;
  border-radius: 50% !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #222 !important;

  border: 2px solid #000 !important;

  background: linear-gradient(to bottom,
      #ffffff 0%,
      #f3f3f3 45%,
      #e6e6e6 100%) !important;

  box-shadow:
    0 2px 3px rgba(0,0,0,0.35),
    inset 0 2px 2px rgba(255,255,255,0.95),
    inset 0 -2px 3px rgba(0,0,0,0.15);

  text-shadow: 0 1px 0 rgba(255,255,255,0.95);
  cursor: pointer;
  user-select: none;

/*   padding-top: 1px !important; ajuste óptico */
}

.vending-button-refresh:active {
  transform: translateY(1px);
}

/* COFFEE ---------------------------------------------------------------------- */

.vending-button-coffee {
  display: inline-block !important;
  box-sizing: border-box !important;

  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;

  border-radius: 50% !important;
  text-align: center;
  vertical-align: middle;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #3a2418 !important;

  border: 2px solid #a67c63 !important;

  background: linear-gradient(to bottom,
      #e3c2ad 0%,
      #d2a98f 45%,
      #c39274 100%) !important;

  box-shadow:
    0 2px 3px rgba(0,0,0,0.30),
    inset 0 2px 2px rgba(255,255,255,0.6),
    inset 0 -2px 3px rgba(0,0,0,0.25);

  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

/*   padding-top: 1px !important; ajuste óptico */
}

.vending-button-coffee:active {
  transform: translateY(1px);
}

/* COFFEE HOPPER — Final (celda 40px) ----------------------- */

.coffee-hopper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 88% !important;
  padding: 4px 3px 14px 3px !important;
  position: relative !important;

  background: #f0eeea !important;
  border: 1.5px solid #bbb !important;
  border-top: none !important;
  border-radius: 0 0 3px 3px !important;
  
  max-height: 32px;
}

/* Tapa con pestañas */
.coffee-hopper::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: -4px !important;
  right: -4px !important;
  height: 8px !important;
  background: #c8c0b4 !important;
  border: 1.5px solid #aaa !important;
  border-bottom: 2px solid #999 !important;
  border-radius: 4px 4px 0 0 !important;
}

/* Boca colgante exterior */
.coffee-hopper::after {
  content: "" !important;
  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  bottom: -8px !important;
  height: 9px !important;
  background: #d6d0c8 !important;
  border: 1.5px solid #aaa !important;
  border-top: none !important;
  border-radius: 0 0 5px 5px !important;
}

.coffee-hopper-label {
  display: block !important;
  width: 84% !important;
  text-align: center !important;
  font-family: 'Arial Narrow', Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 2px 2px !important;
/*   background: #fff !important; */
  color: #444 !important;
  border-radius: 2px !important;
/*   border: 1px solid #ccc !important; */
  position: relative !important;
  z-index: 1 !important;
  
  margin-top: 10px;
}

/* Precio de vending ---------------------------------------------------------------*/

/* Estilo para la Pegatina de Precio (Efecto Vinilo Metálico Coherente) */
.vending-price-plate {
  /* 1. Reset y Adaptación al Grid (No invasivo) */
  display: inline-block !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  margin: 1px !important; /* Margen mínimo */
  cursor: default; /* Estático */

  /* 2. Tamaño y Forma (Más ancho y esquinas muy suaves como un vinilo) */
  padding: 4px 14px !important; /* Más fino verticalmente, más ancho */
  border-radius: 20px !important; /* Esquinas muy redondeadas, típicas de una pegatina cortada */

  /* 3. Tipografía (Estilo Impreso/Grabado Contenido) */
  font-family: Arial, Helvetica, sans-serif !important; /* Misma fuente moderna */
  font-size: 15px !important;      /* Mismo tamaño */
  font-weight: bold !important;
  line-height: 1.2 !important;     /* Altura de línea para que se centre bien */
  color: #444 !important;          /* Gris oscuro, impreso */
  text-align: center;
  /* Sombra de texto nula o mínima para efecto impreso */
  text-shadow: none !important;

  /* 4. El "Cuerpo" Metálico (Degradado idéntico para coherencia) */
  background: linear-gradient(135deg, #f0f0f0 0%, #d9d9d9 100%) !important;
  
  /* 5. El Borde (Efecto Pegatina Plana) */
  /* Reemplazamos el biselado 3D por un borde uniforme y muy sutil. 
     Esto delimita la pegatina sin darle volumen físico. */
  border: 1px solid #c0c0c0 !important; /* Borde gris uniforme y fino */

  /* 6. Sombra de Pegatina (Efecto Adhesivo) */
  /* Usamos una sombra muy suave y difuminada que sugiere que hay un grosor 
     mínimo de material pegado a la superficie. */
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15) !important;
  
  /* 7. Sin efectos de pulsación */
  transition: none;
}

/* Forzamos que no haya cambios en estado activo */
.vending-price-plate:active {
  transform: none !important;
  background: linear-gradient(135deg, #f0f0f0 0%, #d9d9d9 100%) !important;
  border: 1px solid #c0c0c0 !important;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15) !important;
}