/* Estilos generales */
html, body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* overflow-x: hidden;  Considera si realmente lo necesitas */
}

header, footer {
  color: #1769aa;
  background-color: #FF6D8A;
  padding: 1rem;
  text-align: center;
  width: 100%;
  text-decoration: none;
}

main {
  color: #000000;
  flex-grow: 1; /* Ocupar todo el espacio disponible */
  display: flex;        /* Usamos flexbox para centrar el contenido */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center;   /* Centrar verticalmente */
  background-size: cover;
  background-repeat: no-repeat;
  padding: 1rem; /* Agrega espacio alrededor */
  text-decoration: none;
}

.navbar {
  background-color: white; /* Mantiene el color de tu header */
  padding: 2px;
}

.menu {
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.menu li {
  margin: 0 1rem;
  position: relative; /* Para posicionar el dropdown */
}

.menu a, .menu a:visited { /* Aplica estilos a los enlaces del menú y enlaces visitados */
  color: #1769aa; /* Mantiene el color blanco de los enlaces */
  text-decoration: none; /* Elimina el subrayado */
  font-weight: bold; /* Mantiene la negrita */
  padding: 0.5rem 1rem;
  transition: 0.3s;
}

.menu a:hover { /* Estilos al pasar el mouse */
  background-color: #ddd; /* Color de fondo al pasar el mouse */
}

/* Estilos para el dropdown (submenú) */
.dropdown-content {
  display: none; /* Oculta por defecto */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-content li a {
  color: #1769aa;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
  color: black
}

.centrar-seccion {
  display: flex;
  justify-content: center; /* Centrar el contenido */
  align-items: center;
  flex-direction: column;
  text-align: center;
}

/* Contenedor principal del contenido */
#productos {
  color: #1769aa;
  text-align: center;
  width: 65%; /* Para pantallas grandes */
  background-color: #EEEEEE; /* Fondo semitransparente */
  padding: 1rem;
  border-radius: 10px;
  margin: 1rem auto; /* Centrar horizontalmente y añadir margen superior/inferior */
}

/* Estilos para enlaces */
nav a, footer a, header a, main a {
  color: #ddd;
  text-decoration: none;
}

/* Estilos para la navegación */
nav ul {
  list-style: none; /* Elimina los estilos de lista */
  padding: 0;
  display: flex; /* Hace que los elementos estén en línea */
  justify-content: center; /* Centra los elementos en la barra de navegación */
}

nav li {
  margin: 0 1rem; /* Agrega espacio entre los elementos */
  display: inline; /* Asegura que los elementos se mantengan en línea */
}

nav a {
  color: #ddd; /* Mantiene los enlaces en blanco */
  text-decoration: none; /* Elimina el subrayado */
  font-weight: bold; /* Resalta los enlaces */
  padding: 0.5rem 1rem; /* Añade espacio alrededor */
  transition: 0.3s; /* Efecto suave al pasar el cursor */
}

.carousel-control-prev,
.carousel-control-next {
  color: black; /* Cambia esto al color que quieras */
  font-weight: bold;
}

/* Estilos base del diálogo */
dialog {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 2rem;
  width: min(90%, 500px);
  margin: auto;
}

/* Fondo oscuro del modal */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
}

/* Contenido del modal */
.modal-content {
  text-align: center;
}

/* Botones de acción */
.button-group {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

button {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: opacity 0.2s;
}

.confirm-btn {
  border-radius: 6px;
  background: #2ecc71;
  color: black;
}

.deny-btn {
  border-radius: 6px;
  background: #e74c3c;
  color: black;
}

/* Efectos hover */
button:hover {
  opacity: 0.9;
}

/* Media Query para Tablets (Pantallas menores a 1024px) */
@media (max-width: 1024px) {
  #productos {
    width: 90%; /* Se amplía un poco en tablets */
    margin-left: auto;
    margin-right: auto;
  }

}

/* Media Query para Móviles (Pantallas menores a 768px) */
@media (max-width: 768px) {
  main {
    padding: 1rem; /* Reduce el espacio en móviles */
  }
  .menu a {
    padding: 10px;
}

  #productos {
    width: 98%; /* Se ajusta al 90% para mejor visibilidad */
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
  }
}