@font-face {
  font-family: 'Koulen';
  src: url("./fonts/AMOQz46as3KIBPeWgnA9kuYMUg.ttf") format('truetype'); 
  font-weight: normal;
  font-style: normal;
}
#tituloh{
  font-family: "Koulen", sans-serif;
  color: lime;
  font-size: 2.5rem;
}
h2 {
  font-family: "Koulen", sans-serif;
  color: black;
  font-size: 2.5rem;
}


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: black;
color: white;
}

/* PORTADA */
.portada {
height: 100vh;
display: flex;
justify-content: center ;
align-items: center;
text-align: center;
display: flex;
font-family: "koulen", sans-serif;


}


.contenido-portada {
background-color: rgba(0, 0, 0, 0.6);
padding: 40px;
border-radius: 15px;
}
.logo {
font-size: 5rem;

color: lime;
}
.subtitulo {
font-size: 1.5rem;
margin-bottom: 20px;

}
#XXOPIN{
  text-decoration: none;
  color: inherit;
}
#btnEntrar {
padding: 10px 20px;
font-size: 1.5rem;
background-color: white;
color: black;
border: none;
cursor: pointer;
border-radius: 8px;

}
#btnEntrar:hover {
background-color: rgb(255, 72, 0);
color: black;
  transition: background-color 0.3s ease;
}

/* CATEGORÍAS */
.categorias {
padding: 20px 10px;
background-color: black;
text-align: center;
}
.categorias h2 {
margin-bottom: 20px;
}
.carrusel {
display: flex;
overflow-x: auto;
gap: 20px;
padding: 10px;
justify-content: center;
}
.carrusel::-webkit-scrollbar {
display: none;
}
.categoria-card {
flex: 0 0 auto;
width: 200px;
height: 50px;
background-color: white;
border-radius: 10px;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s;
}
.categoria-card:hover {
transform: scale(1.05);
background-color: rgb(255, 72, 0);
}


/* PRODUCTOS */
.productos {
padding: 20px 20px;
}
.barra-superior {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lime;
color: black;
padding: 10px 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.barra-superior h2 {
font-size: 1.5rem;
}
#searchInput {
padding: 8px;
border-radius: 6px;
border: none;
width: 50%;
}

/* Grid de productos */
.productos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
}
.producto {
background-color: white;
color: black;
border-radius: 10px;
padding: 10px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;

}
.quitar-filtros {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

#btnQuitarFiltros {
  width: 200px;
  height: 50px;
  background-color: white;
  color: black;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid lime;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

#btnQuitarFiltros:hover {
  background-color: lime;
  color: rgb(0, 0, 0);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
}
#vaciarCarrito{
  width: 80px;
  height: 50px;
  background-color: white;
  color: black;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid rgb(0, 0, 0);
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}


.producto img {
width: 100%;
height: 160px;
object-fit: contain;
}
.producto h3 {
margin: 10px 0 5px;
}
.producto p {
margin: 5px 0;
}
.producto button {
margin-top: auto;
padding: 5px 10px;
background-color: lime;
border: none;
border-radius: 5px;
cursor: pointer;
}
.producto button:hover {
background-color: rgb(255, 72, 0);
color: black;
transition: background-color 0.3s ease;
}

/* CARRITO */
.carrito-icono {
cursor: pointer;
font-size: 1.2rem;
position: relative;
}

#contadorCarrito {
background: red;
color: white;
border-radius: 50%;
padding: 2px 6px;
font-size: 0.8rem;
position: absolute;
top: -10px;
right: -10px;
}
.carrito {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background-color: white;
color: black;
padding: 20px;
box-shadow: -2px 0 8px rgba(0,0,0,0.3);
transition: right 0.3s ease-in-out;
z-index: 999;
}
.carrito.visible {
right: 0;
}
#iconoCarrito {
   width: 30px;
}


#listaCarrito li {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
#cerrarCarrito {
background-color: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}


/* RESPONSIVE */
@media screen and (max-width: 600px) {
.contenido-portada {
  padding: 20px;
}
.logo {
  font-size: 2rem;
}
.carrusel {
  flex-direction: column;
  align-items: center;
}
.portada {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center ;
align-items: center;
text-align: center;
display: flex;


}

}

/* ================================================= */
/* === NUEVOS ESTILOS PARA HISTORIAL DE COMPRAS === */
/* ================================================= */

/* --- 1. Botones de Acción --- */

/* Contenedor para los botones "Vaciar" y "Comprar" en el carrito */
.carrito-acciones {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Espacio entre los botones */
  margin-top: 20px;
}

/* Estilo para los botones dentro del contenedor de acciones */
.carrito-acciones button {
  flex-grow: 1; /* Hace que ambos botones ocupen el mismo espacio */
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

/* Estilo específico para el nuevo botón "Comprar" */
#btnComprar {
  background-color: lime;
  color: black;
}

#btnComprar:hover {
  background-color: rgb(255, 72, 0); /* Mismo hover que otros botones */
  color: black;
}

/* Ajuste al botón "Vaciar" para que encaje con el nuevo layout */
#vaciarCarrito {
  background-color: #eee;
  color: #333;
}
#vaciarCarrito:hover {
  background-color: #ddd;
}


/* Estilo para el botón "Ver compras" en la barra superior */
#verHistorialBtn {
  padding: 8px 15px;
  background-color: black;
  color: lime;
  border: 2px solid lime;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#verHistorialBtn:hover {
  background-color: lime;
  color: black;
}


/* --- 2. Ventana Modal para el Historial --- */

/* El fondo oscuro semitransparente que cubre toda la pantalla */
.modal {
  display: none; /* Oculto por defecto, se activa con JS */
  position: fixed; /* Se queda fijo aunque se haga scroll */
  z-index: 1000; /* Se asegura de que esté por encima de todo */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Permite scroll si el contenido es muy largo */
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro translúcido */
}

/* El contenedor blanco del contenido de la modal */
.modal-content {
  background-color: #fff;
  color: #333;
  margin: 10% auto; /* Centrado vertical y horizontalmente */
  padding: 25px;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 255, 0, 0.2);
}

/* El título dentro de la modal */
.modal-content h2 {
  text-align: center;
  margin-bottom: 20px;
  color: black; /* Aseguramos el color del título */
}

/* El botón para cerrar (la 'X') */
.close-btn {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
  color: red;
  text-decoration: none;
}


/* --- 3. Contenido del Historial (dentro de la modal) --- */

/* Estilo para cada bloque de compra individual */
.compra-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  margin-bottom: 15px;
}

/* Quitar el borde del último elemento para un look más limpio */
.compra-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.compra-item h4 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #000;
}

.compra-item p {
  margin-bottom: 10px;
  font-size: 1rem;
}

.compra-item ul {
  list-style-type: none; /* Quitar los puntos de la lista */
  padding-left: 15px;
}

.compra-item li {
  color: #555;
  margin-bottom: 5px;
  font-size: 0.9rem;
}