/* Estilos generales */
/* este bloque se encarga de dar estilos generales a todos los elementos del documento */

/* linea 1: * el simbolo asterisco en CSS se llama selector universal. significa que las reglas q ponga dentro se van a aplicar a todos los elementos de la pagina */
/* linea 2: box-sizing: border box:  controla cómo se calcula el ancho y alto de los elementos. border box obliga a que cada elemento mantenga el tamaño exacto que se le asigna en el css */
/* linea 3: margin: controla el espacio exterior del elemento */
/* linea 4: padding: controla el espacio interior del elemento */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* este bloque es para el body (cuerpo de la pagina9 */
/* representa todo el cuerpo visible de la pagina. aqui es donde se define la tipografia general de todo el sitio. altura minima para que la pagina siempre cubra la pantalla, etc  */

/* linea 1: font-family: define la familia de fuentes para el texto */
/* linea 2 y 3: margin y padding:  se asegura de que no haya margenes ni rellenos por defecto */
/* linea 4: display: grid:  al usar grid estamos diseñando la estructura general de los espacios de la pagina */
/* linea 5: grid-template-rows: auto 1fr:  con esto definimos la pantalla en dos filas horizontales. la primera fila el header se ajusta solita a su contenido (auto) y la segunda fila (1fr) se estira para adueñarse del espacio que queda disponible */
/* linea 6: min-height: 100vh:  define la altura mínima del cuerpo como el 100% de la altura de la ventana gráfica */
/* linea 7: background: linear-gradient:  define un degradado como fondo */
/* linea 8: display: flex:  usamos flex para organizar los elementos dentro del cuerpo */
/* linea 9: flex-direction: column:  define la dirección de los elementos flexibles */
/* linea 10: position: relative:  define la posición relativa del cuerpo */

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  /* Cambio: se eliminó `display: grid` y `grid-template-rows` porque
     causaban un conflicto con el flujo flexible (flex) del layout.
     Ahora el `body` usa `display: flex` en columna para mantener
     un comportamiento consistente y evitar desbordes horizontales. */
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* bloque de caracteristicas del header */
/* aqui estan las caracteristicas del encabezado */
/* aqui estan el nombre de la tienda y el menu de navegacion */

/* linea 1: background color: define el color de fondo del encabezado */
/* linea 2: background linear-gradient: propiedad que le da degradado al fondo */
/* linea 3: color: define el color del texto del encabezado */
/* linea 4: padding: define el espacio entre el contenido y los bordes del encabezado. usamos 5px de espacio arriba y abajo del texto y 15px de izq a derecha */
/* linea 5: display: usamos flex para que el contenedor sea flexible y asi poder ordenar lo que tiene adentro ( el titulo, el menu y la barra de busqueda) */
/* linea 6: flex-direction: usamos column para que los elementos se organicen verticalmente */
/* linea 7: align-items: usamos center para centrar los elementos horizontalmente. por eso el titulo distribuidira y el buscador se ven asi */
/* linea 8: box-shadow: define una sombra alrededor del encabezado. */

header {
  background-color: #0056b3;
  background: linear-gradient(to right, lightblue, lightgreen, violet);
  color: white;
  /* Cambio: aumentar padding-top para dejar espacio a los botones flotantes
     que se sitúan en las esquinas superiores sin solaparse con el título */
  padding: 48px 15px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0.1);
}

/* bloque de caracteristicas del banner. esto representa especifimente el nombre de la tienda */

/* linea 1: text-align define el alineamiento del texto. aunque usamos left se ve en el centro debido a que en el header la orden indica que todo se alinee al centro */
/* linea 2: margin: define el espacio en los lados del elemento. usamos 0 para eliminar cualquier margen q ponga el navegador por defecto y arrancar desde cero */
/* linea 3: font-size: define el tamaño de la fuente del texto. REM es una medida relativa se usa para que el tamaño se ajuste y no se fijo */
/* linea 4: line-height: define la altura de línea del texto. nos ayuda a mejorar la legibilidad */
/* linea 5: white-space: define cómo se maneja el espacio en blanco dentro del texto. usamos nowrap para que el texto no se divida en varias líneas */
/* linea 6: width: define el ancho del elemento. usamos 100% para que ocupe todo el espacio disponible */
/* linea 7: letter-spacing: define el espacio entre letras del texto. usamos 0.08em para crear un efecto de espaciado más amplio */
/* linea 8: font-weight: define el grosor de la fuente del texto. usamos 700 para que sea bold */
/* linea 9: text-transform: define cómo se transforma el texto. usamos uppercase para que sea en mayúsculas */
/* linea 10: background: define el degradado del texto. usamos la propiedad linear-gradient para q se vea degradado con varios colores diferentes */
/* linea 11: background-size: define el tamaño del degradado. usamos 300% 300% para que el degradado cubra todo el texto */
/* linea 12: -webkit-background-clip: define cómo se recorta el fondo. usamos text para que el fondo se recorte al contorno del texto */
/* linea 13: -webkit-text-fill-color: define el color del texto. usamos transparent para que se muestre el degradado */
/* linea 14: text-shadow: define la sombra del texto. usamos varias sombras para crear un efecto de brillo */
/* linea 15: animation: define la animación del texto. usamos la propiedad animation para crear un efecto de brillo intermitente */

.banner h1 {
  text-align: left;
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.1;
  /* Cambio: permitir que el título haga wrap en pantallas pequeñas
     para evitar desbordes horizontales. Se reemplazó `white-space: nowrap`
     por `white-space: normal` y se añadió `overflow-wrap: break-word`. */
  white-space: normal;
  width: 100%;
  overflow-wrap: break-word;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #e5f6ff,
    #ffe6fb,
    #e7ffe8,
    #fff9d8,
    #e5f6ff
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.16),
    0 0 18px rgba(255, 255, 255, 0.32);
  animation: neonGlow 5s ease infinite;
}


/* bloque de la Animación de brillo neon del banner */
/* con esto se mueve el degradado de fondo. dado q el degradado es bastante grande el se desliza de izq a der para dar un efecto de fluidez */
/* ademas hace respirar el brillo neon con la propiedad text-shadow */

/* linea 1: @key frames:  define la animación con el nombre neonglow */
/*linea 2:  0 %: dicta las propiedades q tendra al puro inicio de la animacion */
/* linea 3:  background-position: define la posición del degradado. usamos 0% 50% para que esté a la izquierda del texto */
/* linea 4:  text-shadow: define la sombra del texto */

@keyframes neonGlow {
  0% {
    background-position: 0% 50%;
    text-shadow:
      0 0 12px rgba(255, 255, 255, 0.8),
      0 0 30px rgba(77, 205, 255, 0.7),
      0 0 45px rgba(255, 190, 255, 0.6);
  }
  50% {
    background-position: 100% 50%;
    text-shadow:
      0 0 18px rgba(255, 255, 255, 0.9),
      0 0 40px rgba(56, 186, 255, 0.8),
      0 0 60px rgba(255, 145, 255, 0.7);
  }
  100% {
    background-position: 0% 50%;
    text-shadow:
      0 0 12px rgba(255, 255, 255, 0.8),
      0 0 30px rgba(77, 205, 255, 0.7),
      0 0 45px rgba(255, 190, 255, 0.6);
  }
}

/* este es el bloque donde estan los botones de navegacion de hogar, mantenimiento de productos y categorias que estan dentro del header*/

/* linea 1: list-style: usamos none para que le quite los puntitos de viñetas que trae por defecto la ul */
/* linea 2: padding: 0 para que no haya padding por defecto */
/* linea 3: display: usamos flex para que el contenedor sea flexible. con esto se acomodan uno a la par del otro en lugar de hacia abajo */
/* linea 4: justify-content: esta propiedad distribuye los elementos y los centra dentro de la barra de navegacion */
/* linea 5: font-size: define el tamaño de la fuente para los enlaces de navegacion */
/* linea 6: text-decoration: define la decoración del texto para los enlaces de navegacion. usamos under-line para agregar un subrayado */
/* linea 7: margin: 10px 0 para agregar un poco de espacio alrededor de la barra de navegacion */

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  font-size: large;
  text-decoration: underline;
  margin: 10px 0;
}

.menu-links {
  display: flex;
  list-style: none;
  text-align: center;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 12px 18px;
  display: block;
  border-radius: 25px;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

nav ul li a:hover,
nav ul li a:focus {
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.75);
  color: #001f4d;
}

nav ul li a:active {
  transform: translateY(0);
}

.search-bar {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  transform: scale(1);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
}

.search-bar input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: #003366;
}

.search-bar input::placeholder {
  color: rgba(0, 83, 143, 0.7);
}

.search-bar button {
  background-color: #0056b3;
  color: white;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: bold;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  border-radius: 0 999px 999px 0;
}

.search-bar button:hover {
  background-color: #00ff41;
  color: #003366;
  transform: translateX(2px);
  box-shadow: 0 8px 20px rgba(0, 94, 179, 0.18);
}

/* Cambio: botón para abrir el modal de categorías */
/* NOTA: El botón clásico fue reemplazado por un control 'hamburger' flotante. */

/* Ocultar checkbox visualmente pero mantener accesible */
.hamburger-check {
  position: absolute;
  left: -9999px;
}

/* Estilos del icono hamburguesa (tres rayas) */
.hamburger {
  position: fixed;
  /* Cambio: posicionar en la esquina superior izquierda */
  left: 12px;
  top: 12px;
  width: 32px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  z-index: 1400;
}
.hamburger span {
  display: block;
  height: 2px;
  background: #003366;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger:hover span { background: #0056b3; }

/* Cuando el checkbox esté marcado, transformamos ligeramente el icono */
#hamburger-check:checked + .hamburger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#hamburger-check:checked + .hamburger span:nth-child(2) { opacity: 0; }
#hamburger-check:checked + .hamburger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Modal flotante para categorías */
.category-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.5);
  z-index: 1300;
}
.category-modal.open { display: flex; }
.category-modal-card {
  width: min(420px, 92%);
  max-height: 80vh;
  overflow: auto;
  background: linear-gradient(180deg,#ffffff,#f7fbff);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  position: relative;
}
.category-modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.category-modal-body {
  padding-top: 10px;
}

/* En pantallas grandes dejamos la barra lateral como siempre, en móviles preferimos el modal */
@media (max-width: 800px) {
  #contenedor-categorias { display: none; }
}

/* Cambio: estilos para el carrito flotante y su modal (igual comportamiento que categorías) */
.cart-toggle {
  position: fixed;
  /* Cambio: posicionar en la esquina superior derecha */
  right: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0056b3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  border: none;
  cursor: pointer;
  z-index: 1500;
}
.cart-toggle i { font-size: 18px; }

.cart-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.5);
  z-index: 1400;
}
.cart-modal.open { display: flex; }
.cart-modal-card {
  width: min(420px, 92%);
  max-height: 80vh;
  overflow: auto;
  background: linear-gradient(180deg,#ffffff,#f7fbff);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  position: relative;
}
.cart-modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.cart-modal-body { padding-top: 10px; }

@media (max-width: 800px) {
  /* ocultar la barra lateral del carrito en móviles para usar el modal */
  .cart { display: none; }
  .cart-toggle { right: 14px; top: 14px; width: 36px; height: 36px; }
}

/* Botón flotante para tipo de cambio */
.exchange-toggle {
  position: fixed;
  right: 68px; /* sitúalo a la izquierda del carrito flotante */
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00a3d7;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  border: none;
  cursor: pointer;
  z-index: 1500;
  font-weight: 700;
}

.exchange-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.5);
  z-index: 1500;
}
.exchange-modal.open { display: flex; }
.exchange-modal-card {
  width: min(360px, 92%);
  max-height: 70vh;
  overflow: auto;
  background: linear-gradient(180deg,#ffffff,#f7fbff);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  position: relative;
}
.exchange-modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.exchange-modal-body { padding-top: 10px; font-weight:700; color:#00334d }

@media (max-width: 800px) {
  .exchange-toggle { right: 58px; }
}

/* Botón flotante para abrir el juego del gato */
.game-toggle {
  position: fixed;
  right: 14px;
  top: 72px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5f6d, #ff8a00);
  color: #fff;
  border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  cursor: pointer;
  z-index: 1500;
  font-weight: 700;
}

.game-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.6);
  z-index: 1600;
  padding: 20px;
}
.game-modal.open { display: flex; }
.game-modal-card {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg,#ffffff,#f7fbff);
  border-radius: 16px;
  padding: 18px 20px 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  position: relative;
}
.game-modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #00334d;
}
.game-modal-body { padding-top: 10px; }

@media (max-width: 768px) {
  .game-toggle {
    right: 10px;
    top: 10px;
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .game-modal {
    padding: 12px;
  }

  .game-modal-card {
    width: min(100%, 460px);
    padding: 14px 14px 18px;
    border-radius: 12px;
  }

  .game-modal-body {
    padding-top: 6px;
  }

  .contenedor-juego {
    margin-top: 8px;
    gap: 6px;
  }

  .tablero {
    width: min(82vw, 280px);
    height: auto;
    aspect-ratio: 1;
    gap: 8px;
  }

  .celda {
    font-size: 1.6rem;
  }

  .estado-juego {
    font-size: 1rem;
  }

  .btn-reiniciar {
    padding: 8px 14px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .game-modal-card {
    padding: 12px 12px 16px;
  }

  .tablero {
    width: min(78vw, 240px);
    gap: 6px;
  }

  .celda {
    font-size: 1.35rem;
  }

  .estado-juego {
    font-size: 0.95rem;
  }

  .btn-reiniciar {
    padding: 7px 12px;
    font-size: 0.95rem;
  }
}

body.modal-open {
  overflow: hidden;
}

main {
  /*Acomodo interno*/
  display: flex;
  flex-direction: row;
  /* Cambio: usar flex-start para que no quede un espacio en blanco cuando
     uno de los asides (carrito) está oculto; la sección central ocupará
     el espacio disponible gracias al `flex: 1` abajo. */
  justify-content: flex-start;
  align-items: normal;
  gap: 20px;
  padding: 15px;
  width: 100%;

  /*propiedades con respecto al contenedor padre */
}

.categories,
.cart {
  flex: 0 0 250px;
  background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
  color: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0.1);
  align-self: flex-start;
  position: sticky;
  top: 20px;
}

.MenuOptions {
  list-style: none;
  padding: 0;
}

/*Como el section en este caso es la parte central, puedes poner un numero mas grande para que ocupe mas espacio*/

section {
  /*Con eso usted le esta diciendo cuantas porciones del espacio total va a ocupar cada aside o cada section*/
  background-color: #f4f4f4;
  border-radius: 8px;
  display: block;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
  align-content: flex-start;
  /*propiedades con respecto al contenedor padre */
  /* Cambio: usar flex:1 para permitir que la sección central crezca y
     ocupe el espacio disponible cuando alguno de los asides esté oculto. */
  flex: 1;
}

.tituloProductos {
  min-width: 100%;
  height: fit-content;
  margin-bottom: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #003366;
}
.products {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fbff;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  padding: 14px;
  flex-grow: 1;
  align-items: stretch;
}

/* Mostrar 4 columnas en pantallas anchas para mejor equilibrio (3 filas de 4) */
@media (min-width: 1024px) {
  .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.product {
  background-color: white;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  min-height: 180px;
  justify-content: space-between;
}

.product button {
  background-color: #004e92;
  color: white;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  width: 100%;
  font-weight: 600;
}

.product button:hover {
  background-color: #00ff41;
  color: #003366;
}

.product h3 {
  font-size: 1rem;
  margin: 2px 0 0;
  color: #333;
  text-align: center;
  line-height: 1.3;
}

.product p {
  font-weight: 700;
  color: #0056b3;
  font-size: 1rem;
  margin: 0;
}

.product a {
  background-color: #0056b3;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin-top: auto;
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0.2);
  transition: all 0.3s ease;
}

#contenedor-categorias {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}

.categories h2 {
  text-align: center;
  color: white;
  text-decoration: underline;
  margin-bottom: 25px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  font-size: 28px;
  text-transform: capitalize;
}

.btn-categoria {
  background: transparent;
  border: none;
  color: white;
  /* Cambio: mejorar legibilidad de las categorías */
  font-size: 1.15rem; /* ligeramente más grande */
  text-align: left;
  cursor: pointer;
  padding: 10px 16px; /* más espacio para tocar en móviles */
  transition: all 0.18s ease;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.btn-categoria:hover {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding-left: 22px;
  transform: translateX(4px);
}

/* Estilos específicos para los botones de categoría dentro del modal */
.category-modal-body .btn-categoria {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin: 6px 0;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  color: #00263a;
  font-weight: 700;
}
.category-modal-body .btn-categoria:hover {
  background: rgba(0,94,179,0.08);
  color: #001f3f;
}

.cart {
  /* Cambio: ocultar la barra lateral del carrito por defecto.
     El carrito ahora se muestra únicamente mediante el modal flotante */
  display: none !important;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) !important;
  color: white;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.cart ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart li,
.cart p {
  font-size: 20px;
  padding: 10px 15px;
  transition: all 0.3s;
}

.cart li:hover,
.cart p:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding-left: 30px;
  text-decoration: underline;
}

.cart h2 {
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
  font-size: 28px;
}

.cart p {
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  padding: 15px 10px;
  margin: 20px 0;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  color: #ffffff;
  border-radius: 15px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.product img {
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  background-color: #f9f9f9;
  display: block;
  margin-bottom: 4px;
  border-radius: 8px;
}

/*.cart-items {
  list-style: none;
  text-align: left;
  margin: 23px;
  padding: 10px;
  font-size: 25px;
  text-shadow: 0 0 8px;
  margin-bottom: 35px;
}
/*.cart ul li {
  margin-bottom: 25px;
  font-size: 25px;
}*/

/*.cart p {
  font-size: 24px;
  font-weight: bold;
  margin-top: 30px;
  text-align: center;
  color: #ffffff;
}*/

.cart button {
  display: block;
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  background-color: #ffffff;
  color: #004e92;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 15px;
  transition: transform 0.2s;
}

.cart button:hover {
  background-color: #e0e0e0;
  transform: scale(1.02);
}

.categories {
  display: flex;
  flex-direction: column;
  position: sticky; /* Restaurado: mantener la barra lateral fija en pantallas grandes */
  top: 20px;
  padding-bottom: 30px; /* Reducimos el padding exagerado */
  gap: 20px; /* Separa los elementos internos automáticamente */
  align-self: flex-start;
}

.seccionTipoCambio {
  margin-top: auto; /* ¡Este es el truco! Empuja la caja al fondo de la tarjeta */
  padding: 18px 12px;
  background: linear-gradient(
    135deg,
    #005f73,
    #0a9396
  ); /* Un degradado sutil */
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}

#listaTipoCambio {
  list-style-type: none; /* Quita los puntitos */
  padding: 0; /* Centra el texto eliminando el espacio izquierdo */
  margin: 5px 0 0 0; /* Separa la lista un toque hacia abajo del botón */
}

.seccionTipoCambio h3 {
  font-size: 12px;
  color: #e0f7fa;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5;
  font-weight: 600;
}

.btnActualizar {
  background-color: #ffffff;
  color: #0a9396;
  border: none;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  width: 85%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btnActualizar:hover {
  background-color: #e0f7fa;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Estilos para la página de mantenimiento de productos */
.product-form {
  max-width: 900px;
  margin: 24px auto;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.product-form h2 {
  color: #004e92;
  margin-bottom: 12px;
  font-size: 1.4rem;
}

#form-producto > div {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

#form-producto label {
  font-weight: 700;
  color: #0056b3;
  margin-bottom: 6px;
}

#form-producto input[type="text"],
#form-producto input[type="number"],
#form-producto select,
#form-producto input[type="file"] {
  padding: 10px;
  border: 2px solid #e6f3ff;
  border-radius: 8px;
  background: #ffffff;
  outline: none;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

#form-producto input:focus,
#form-producto select:focus {
  box-shadow: 0 6px 18px rgba(0, 94, 179, 0.08);
  border-color: #a8ddff;
}

#form-producto button[type="submit"],
#form-producto button[type="button"] {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

#form-producto button[type="submit"] {
  background-color: #0056b3;
  color: #ffffff;
}

#form-producto button[type="submit"]:hover {
  background-color: #00ff41;
  color: #003366;
}

#form-producto #limpiar {
  background-color: #eeeeee;
  color: #004e92;
  margin-left: 8px;
}

#preview {
  margin-top: 18px;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(2, 136, 209, 0.03),
    rgba(170, 225, 255, 0.03)
  );
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

#preview h3 {
  color: #004e92;
  margin-bottom: 10px;
}

#img-preview {
  max-width: 220px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin-bottom: 8px;
  border: 1px solid #e6eef8;
}

#preview p {
  color: #003366;
  font-weight: 600;
  margin: 4px 0;
}

/* bloque resposivo. permite que el diseño se adapte a diferentes tamaños de pantalla */

@media (max-width: 800px) {
  .product-form {
    padding: 14px;
    margin: 12px;
  }
  #img-preview {
    max-width: 160px;
  }

  /* bloque para dispositivos móviles */

  .categories {
    visibility: hidden; /* ocultar la barra lateral por defecto */
    opacity: 0;
    position: fixed;
    top: 0;
    left: -300px; /* fuera de la pantalla */
    width: 250px;
    height: 100%;
    background-color: #2193b0;
    transition: left 0.3s ease;
    z-index: 9999;
    padding-top: 50px;
    color: white;
    flex-direction: column;
    align-items: center;
  }

  #hamburger-check:checked ~ .categories {
    display: flex;
    left: 0; /* mostrar la barra lateral */
  }
}

.btnActualizar:active {
  transform: translateY(1px);
}

#resultadoTipoCambio {
  margin-top: 14px;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ----------------------------
   Responsive improvements
   Cada bloque explica por qué se añadió y qué efecto tiene.
   ---------------------------- */

/* Ajuste: hacer las imágenes de producto fluidas
   - Evita recortes en pantallas pequeñas.
   - `height: auto` permite mantener la proporción.
*/
.product img {
  width: 100%;
  height: auto; /* mantener proporción */
  max-height: 220px; /* límite razonable en desktop */
  object-fit: contain;
}

/* Breakpoint: tablets y pantallas medianas (<= 1024px)
   - Reduce el ancho fijo de las barras laterales para ganar espacio al contenido.
   - Ajusta el grid de productos para mostrar columnas más anchas.
   - Reduce el tamaño del título para evitar solapamientos.
*/
@media (max-width: 1024px) {
  .categories,
  .cart {
    flex: 0 0 200px; /* menos espacio lateral */
  }

  .products {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .banner h1 {
    font-size: 1.8rem;
  }
}

/* Breakpoint: móviles grandes / tablets pequeñas (<= 800px)
   - Apila el layout (main) en columna para que los asides queden encima/abajo.
   - Hace que `.categories` y `.cart` sean full-width y no estén fijos.
   - Ajusta la rejilla de productos y reduce espacios/paddings.
   - Centra y envuelve el título para mejorar legibilidad.
*/
@media (max-width: 800px) {
  main {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  /*.categories,
  .cart {
    position: relative; /* ya no los pegamos arriba con sticky 
    top: 0;
    width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
    margin-bottom: 8px;
  }*/

  .products {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    padding: 12px;
    gap: 12px;
  }

  .banner h1 {
    font-size: 1.4rem;
    text-align: center;
    white-space: normal; /* permitir wrap del texto */
  }

  nav ul {
    flex-wrap: wrap; /* que los items del menú se ajusten en varias líneas */
    justify-content: center;
  }

  .search-bar {
    max-width: 100%;
    margin: 10px 0;
    border-radius: 12px;
  }

  .product img {
    max-height: 140px; /* más pequeño en móviles */
  }
}

/* Breakpoint: móviles pequeños (<= 480px)
   - Simplifica el layout: columnas más estrechas, letras y paddings reducidos.
   - Mejora la densidad de información en pantallas pequeñas.
*/
@media (max-width: 480px) {
  .products {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 8px;
  }

  .product {
    padding: 8px;
    min-height: 120px;
  }

  .banner h1 {
    font-size: 1.1rem;
  }

  nav ul li a {
    padding: 8px 10px;
    font-size: 0.95rem;
    border-radius: 10px;
  }

  .cart p,
  .cart li {
    font-size: 18px;
    padding: 8px 10px;
  }

  .search-bar input {
    font-size: 0.95rem;
    padding: 8px;
  }
}

/* Footer */
/* DEV: Estilos añadidos para el footer dinámico y el modal.
  Buscar las clases `.site-footer`, `.footer-modal` y `.dev-note` para identificar los bloques modificados. */
.site-footer {
  /* Cambio: reducir altura del footer quitando padding vertical y ajustando colores */
  background: linear-gradient(90deg, #003366 0%, #0056b3 50%, #002b4f 100%);
  color: #f1f7ff;
  padding: 10px 16px; /* menos alto */
  margin-top: 12px;
}
.site-footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 12px; /* menos espacio entre columnas */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.site-footer h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
}
.site-footer .muted {
  opacity: 0.9;
  font-size: 0.95rem;
}
.footer-links {
  display: flex;
  gap: 14px;
  align-items: center;
}
.footer-links a {
  color: #eaf6ff;
  text-decoration: none;
  padding: 6px 8px; /* reducir padding para compactar */
  border-radius: 6px;
  font-weight: 700;
}

/* Ocultar completamente la sección de tipo de cambio dentro de la columna
  de categorías (el contenido se muestra ahora en un modal independiente). */
#contenedor-categorias .seccionTipoCambio { display: none !important; }
.footer-links a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transform: translateY(-2px);
}
.footer-legal {
  opacity: 0.95;
  font-weight: 600;
}

/* Modal */
.footer-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.6);
  z-index: 1200;
}
.footer-modal.open {
  display: flex;
}
.footer-modal .modal-card {
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  width: min(780px, 92%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  color: #003366;
  position: relative;
}
.footer-modal .modal-title {
  margin: 0 0 12px 0;
}
.footer-modal .modal-body {
  color: #06324a;
  line-height: 1.45;
}
.modal-close {
  position: absolute;
  right: 12px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #00334d;
}

@media (max-width: 640px) {
  .site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-links {
    width: 100%;
    justify-content: space-between;
  }
  .footer-legal {
    margin-top: 12px;
  }
}

/*estilos generales de la pagina*/


.tablero {
  display: grid; /*activa el modo malla o grid del contenedor*/
  grid-template-columns: repeat(3, 1fr); /*define 3 columnas de igual tamaño*/
  grid-template-rows: repeat(3, 1fr); /*crea 3 filas iguales hacia abajo*/
  gap: 10px; /*separa las celdas 10px para que se vean las lineas del gato*/
  width: 300px; /*define el ancho del tablero*/
  height: 300px; /*define el alto del tablero*/
  margin: 0 auto; /*centra el tablero en la pantalla*/
}

.celda {
  background-color: #f0f0f0; /*fondo de color gris claro a cada cuadrito*/
  border: 2px solid #e0e0e0; /*le pone un borde gris claro de 2px alrededor*/
  display: flex; /*activa flexbox para poder manipular lo que esta dentro de las celdas*/
  justify-content: center; /*centra la X o la O de forma horizontal*/
  align-items: center; /*centra la X o la O de forma vertical*/
  font-size: 2rem; /*hace que la X y la O se vean grandes y claras*/
  font-family: sans-serif; /*cambia la letra a una mas limpia sin colochos*/
  color: #333; /*color por defecto de texto*/
  cursor: pointer; /*puntero del mouse cambia a una manita al pasar por encima de la celda*/
  transition: all 0.3s ease; /*transición suave para todos los cambios*/
}

.celda.x /*estilos dinamicos para las celdas con X*/
{
  background: linear-gradient(135deg, #FF006E, #E0144C); /*gradiente magenta/rosa vibrante para X*/
  border: 2px solid #FF006E; /*borde magenta*/
  color: white; /*texto blanco para la X*/
  font-weight: bold; /*X mas gruesa y visible*/
  box-shadow: 0 4px 8px rgba(255, 0, 110, 0.3); /*sombra suave magenta*/
}

.celda.o /*estilos dinamicos para las celdas con O*/
{
  background: linear-gradient(135deg, #00D9FF, #0096FF); /*gradiente cyan/azul vibrante para O*/
  border: 2px solid #00D9FF; /*borde cyan*/
  color: white; /*texto blanco para la O*/
  font-weight: bold; /*O mas gruesa y visible*/
  box-shadow: 0 4px 8px rgba(0, 217, 255, 0.3); /*sombra suave cyan*/
}

.celda:hover  /*cambia el color de fondo cuando el mouse pasa por encima de la celda*/ 
{
  transform: scale(1.08); /*agranda un poco la celda al pasar el mouse por encima*/
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /*aumenta la sombra al pasar el mouse*/
}

.celda:not(.x):not(.o):hover /*efecto hover solo para celdas vacias*/
{
  background-color: #e0e0e0; /*fondo ligeramente mas oscuro para celdas vacias*/
}

.contenedor-juego /*aqui le damos las caracteristicas al contenedor del juego*/
 {
  display: flex; /*convierte el contenedor en una caja flexible*/
  flex-direction: column; /* acomodamos los elementos en fila hacia abajo*/
  align-items: center; /*centra de manera horizontal todo lo que esta dentro*/
  justify-content: center; /*centra verticalmente el contenido*/
  gap: 8px; /*separa los elementos dentro del contenedor reducido*/
  margin-top: 15px; /*separa el tablero del juego de la parte superior reducido*/
  flex: 1; /*hace que crezca para llenar el espacio disponible*/
}

.estado-juego /*aqui le damos las caracteristicas al contenedor del estado del juego*/ 
{
  font-size: 1.1rem; /*hace que el texto se vea grande y claro*/
  font-family: sans-serif; /*cambia la letra a una mas limpia sin colochos*/
  color: green; /*pone el texto de color verde*/
  font-weight: bold; /*pone el texto en negrita*/
  white-space: pre-line; /*respeta los saltos de linea en el texto*/
  text-align: center; /*centra el texto*/
}

.btn-reiniciar /*aca se le dan las caracteristicas al boton de reiniciar*/ 
{
  background-color: #0077b6; /*pone el fondo del boton de color azul*/
  color: white; /*pone el texto del boton de color blanco*/
  border: none; /*quita el borde del boton*/
  padding: 10px 20px; /*le da espacio por dentro al boton*/
  font-size: 1.1rem; /*letra un poco mas grande*/
  font-weight: bold; /*letra en negrita*/
  border-radius: 5px; /*redondea las esquinas del boton*/
  cursor: pointer; /*cambia el cursor a una manita al pasar por encima del boton*/
  transition: background-color 0.2s ease; /*hace que el cambio de color del boton sea suave y no de golpe*/
  text-align: center; /*centra el texto dentro del boton*/
}

.btn-reiniciar:hover /*cambia el color del boton al pasar el mouse por encima*/ {
  background-color: #00b4d8; /*cambia el color del boton a un azul mas claro*/
}

/* estilos para animacion de confeti cuando hay ganador*/
.confeti /*particulas de confeti*/
{
  position: fixed; /*posicion fija en la pantalla*/
  pointer-events: none; /*no interfiere con los clicks*/
  font-size: 20px; /*tamaño del confeti*/
  z-index: 9999; /*aparece por encima de todo*/
}

@keyframes caida-confeti /*animacion de caida del confeti*/
{
  to { transform: translateY(100vh) rotate(360deg); opacity: 0; } /*cae desde arriba hasta abajo rotando*/
}

.confeti.animacion-confeti /*clase que activa la animacion*/
{
  animation: caida-confeti 3s ease-out forwards; /*aplica la animacion de caida*/
}

.estado-juego.ganador /*estilos especiales cuando hay ganador*/
{
  font-size: 2rem; /*texto mas grande*/
  color: #FFD700; /*color dorado para celebración*/
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); /*brillo dorado alrededor del texto*/
  animation: pulso-ganador 0.6s infinite; /*animacion de pulso*/
  background: linear-gradient(135deg, #FF006E, #00D9FF); /*gradiente futurista*/
  -webkit-background-clip: text; /*aplica el gradiente al texto*/
  -webkit-text-fill-color: transparent; /*hace el texto transparente para ver el gradiente*/
  background-clip: text; /*aplica el gradiente al texto*/
}

@keyframes pulso-ganador /*animacion de pulso para el ganador*/
{
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* estilos para el header*/
header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /*gradiente futurista purpura*/
  color: white; /*texto blanco*/
  text-align: center; /*centra el texto*/
  padding: 12px 20px; /*espacio alrededor del texto reducido*/
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4); /*sombra futurista con gradiente*/
  position: relative; /*posicion relativa para animaciones*/
  overflow: hidden; /*oculta el contenido que se desborda*/
}

header::before /*pseudo elemento para efecto de fondo animado*/
{
  content: ""; /*sin contenido visual*/
  position: absolute; /*posicion absoluta*/
  top: 0;
  left: -100%; /*comienza fuera de la pantalla*/
  width: 200%; /*el doble del ancho para la animacion*/
  height: 100%; /*alto completo*/
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); /*gradiente de brillo*/
  animation: brillo 3s infinite; /*animacion de brillo*/
}

@keyframes brillo /*animacion de brillo que pasa por el header*/
{
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

header h1 {
  margin: 0; /*quita el margen del h1*/
  font-size: 1.8rem; /*hace que el texto se vea grande y claro*/
  font-family: sans-serif; /*cambia la letra a una mas limpia sin colochos*/
  position: relative; /*posicion relativa para que aparezca encima del pseudo elemento*/
  z-index: 1; /*asegura que el texto aparezca encima del efecto de brillo*/
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /*sombra de texto para profundidad*/
  letter-spacing: 1px; /*espacio entre letras para efecto futurista*/
}

/* estilos para el footer*/


footer::before /*pseudo elemento para efecto de fondo animado en el footer*/
{
  content: ""; /*sin contenido visual*/
  position: absolute; /*posicion absoluta*/
  top: 0;
  right: -100%; /*comienza fuera de la pantalla a la derecha*/
  width: 200%; /*el doble del ancho para la animacion*/
  height: 100%; /*alto completo*/
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); /*gradiente de brillo*/
  animation: brillo-footer 3s infinite; /*animacion de brillo*/
}

@keyframes brillo-footer /*animacion de brillo que pasa por el footer*/
{
  0% { right: -100%; }
  50% { right: 100%; }
  100% { right: 100%; }
}

footer p {
  margin: 2px 0; /*espacio pequeño entre párrafos*/
  font-size: 0.8rem; /*letra un poco mas pequeña que el header*/
  font-family: sans-serif; /*cambia la letra a una mas limpia sin colochos*/
  position: relative; /*posicion relativa para que aparezca encima del pseudo elemento*/
  z-index: 1; /*asegura que el texto aparezca encima del efecto de brillo*/
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); /*sombra suave de texto*/
  letter-spacing: 0.5px; /*espacio pequeño entre letras*/
}


/* Nota visible del desarrollador eliminada: la información de cambios permanece en comentarios del código pero sin renderizarse en la página. */