/* Estilos generales del cuerpo */
body {
    background-color: black; /* Fondo negro para toda la página */
    color: white; /* Texto principal en blanco */
    font-family: sans-serif; /* Una fuente legible */
    margin: 0; /* Elimina márgenes por defecto del navegador */
    display: flex; /* Habilita Flexbox para organizar nav y main-content */
    min-height: 100vh; /* Para que ocupe al menos toda la altura de la ventana */
}

/* Estilos para el encabezado */
header {
    width: 100%; /* Ocupa todo el ancho */
    text-align: center; /* Centra el texto */
    padding: 20px 0; /* Relleno superior e inferior */
    background-color: #1a1a1a; /* Un gris oscuro para el encabezado */
    border-bottom: 2px solid #A4DE02; /* Borde inferior verde lima */
}

h1 {
    color: #A4DE02; /* Título principal en verde lima */
    margin: 0;
}

/* Estilos para la navegación lateral */
nav {
    background-color: black; /* Fondo negro para la navegación */
    padding: 20px;
    border-right: 2px solid #A4DE02; /* Contorno verde lima a la derecha */
    display: flex; /* Habilita Flexbox para los enlaces */
    flex-direction: column; /* Coloca los enlaces en columna */
    align-items: flex-start; /* Alinea los enlaces a la izquierda */
    gap: 15px; /* Espacio entre los enlaces */
    flex-shrink: 0; /* Evita que la navegación se encoja */
    width: 180px; /* Un ancho fijo para la navegación */
}

nav a {
    color: #A4DE02; /* Color de los enlaces en verde lima */
    text-decoration: none; /* Sin subrayado */
    padding: 8px 15px;
    border: 1px solid transparent; /* Borde transparente por defecto */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Transición suave */
    display: block; /* Para que el padding y el border se apliquen bien */
    width: 100%; /* Ocupa todo el ancho disponible en la nav */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
    font-weight: bold; /* Texto en negrita */
}

nav a:hover {
    background-color: #A4DE02; /* Fondo verde lima al pasar el ratón */
    color: black; /* Texto negro al pasar el ratón */
    border-color: white; /* Borde blanco al pasar el ratón */
}

/* Estilos para el contenedor principal de contenido (el cuadrado enorme) */
/* Primero, envolveremos todas tus sections dentro de un div, así:
   <div id="main-content">
       <section id="juegos">...</section>
       <section id="emuladores">...</section>
       ...
   </div>
*/
#main-content {
    flex-grow: 1; /* Ocupa todo el espacio restante */
    background-color: #1a1a1a; /* Fondo oscuro para el contenido principal */
    border: 2px solid #A4DE02; /* Contorno verde lima */
    margin: 20px; /* Margen alrededor del contenido */
    padding: 20px;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    overflow-y: auto; /* Para desplazamiento si el contenido es largo */
}

/* Ocultar todas las secciones por defecto (lo gestionaremos con JavaScript) */
#juegos, #emuladores, #programas, #celulares {
    display: none;
    padding: 20px; /* Añade un poco de padding a las secciones */
    background-color: #222; /* Fondo un poco más claro para el contenido de la sección */
    border-radius: 5px;
}

/* Estilo para la sección activa (la que se mostrará) */
#main-content section.active {
    display: block; /* Muestra la sección activa */
}


/* Estilos para el pie de página */
footer {
    width: 100%; /* Ocupa todo el ancho */
    text-align: center;
    padding: 15px 0;
    background-color: #1a1a1a; /* Fondo gris oscuro */
    color: #A4DE02; /* Texto en verde lima */
    border-top: 2px solid #A4DE02; /* Borde superior verde lima */
    margin-top: auto; /* Empuja el footer hacia abajo */
}

/* Para la estructura de flexbox principal */
body > header {
    position: fixed; /* Fija el encabezado arriba */
    top: 0;
    left: 0;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

body {
    padding-top: 80px; /* Espacio para el encabezado fijo */
    display: flex;
    flex-direction: column; /* Cambia la dirección principal a columna */
}

main-container {
    display: flex;
    flex-grow: 1; /* Ocupa el espacio restante */
}