/* --------------------
   Base de la página
-------------------- */
body {
  background-color: #000; /* Fondo negro */
  color: #fff;            /* Texto blanco */
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Encabezado principal */
h1 {
  color: #ADFF2F; /* Verde neón */
  text-align: center;
  margin-top: 20px;
}

/* --------------------
   Formulario de búsqueda
-------------------- */
.busqueda {
  margin: 20px;
  text-align: center;
}

.busqueda input[type="text"] {
  padding: 8px;
  width: 250px;
  border: 1px solid #ADFF2F; /* Borde verde neón */
  border-radius: 4px;
  background-color: #1a1a1a; /* Gris oscuro para contrastar */
  color: #fff;
}

.busqueda input[type="text"]::placeholder {
  color: #BFBFBF; /* Gris claro para el placeholder */
}

.busqueda input[type="submit"] {
  padding: 8px 16px;
  border: none;
  background: #ADFF2F; /* Botón en verde neón */
  color: #000;         /* Texto negro para contraste */
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
  transition: background-color 0.3s;
}

.busqueda input[type="submit"]:hover {
  background-color: #90EE90; /* Verde más claro al hover */
}

/* --------------------
   Sección de productos
-------------------- */
.productos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}

/* --------------------
   Cada card de producto
-------------------- */
.producto {
  background-color: #1a1a1a;
  border: 1px solid #333;
  padding: 10px;
  width: 200px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: transform 0.3s, box-shadow 0.3s;
}


.producto:hover {
  transform: scale(1.05); /* Efecto zoom al pasar el mouse */
  box-shadow: 0 4px 10px rgba(0,0,0,0.6); /* Sombra más fuerte */
}

/* Para productos sin stock o desactivados */
.sin-stock {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Imagen del producto */
.producto img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* --------------------
   Etiquetas de oferta
-------------------- */
.etiqueta-oferta {
  display: inline-block;
  background-color: red;
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  margin-bottom: 5px;
}

/* Precio original tachado */
.precio-antiguo {
  color: #BFBFBF; /* Gris claro */
  font-size: 14px;
  text-decoration: line-through;
}

/* Precio final con oferta */
.precio-oferta {
  color: red;
  font-size: 18px;
  font-weight: bold;
}

/* Precio normal (sin oferta) */
.precio-normal {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

/* --------------------
   Ajustes extras
-------------------- */
/* Ejemplo de texto secundario en gris claro */
.secondary-text {
  color: #BFBFBF;
}