/* Fondo oscuro y fuente */
body {
    background-color: #0d1117; /* Fondo oscuro */
    color: #ffffff; /* Texto en color blanco */
    font-family: 'Courier New', Courier, monospace; /* Fuente estilo consola */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Oculta el desbordamiento del fondo animado */
    overflow-y: auto; /* Permite el desplazamiento vertical */
}


/* Encabezado */
header {
    display: flex; /* Para alinear título y menú */
    justify-content: space-between; /* Separar título y menú */
    align-items: center; /* Centrar verticalmente el contenido */
    text-align: center;
    background-color: #161b22; /* Fondo más oscuro para el header */
    padding: 0.0em 0;
}


header h1 {
    font-family: Arial, sans-serif; /* Fuente igual que en tu menú */
    font-size: 28px; /* Tamaño del título */
    color: white; /* Mantén el color blanco */
    margin: 30px auto; /* Separación del borde superior */
    text-align: center; /* Asegura que esté centrado */
    max-width: 90%; /* Limita el ancho para evitar que quede pegado a los lados */
}

/* Botón de regreso al Home */
.home-button {
    background: none; /* Quitar el fondo */
    border: none; /* Eliminar bordes */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    font-family: Arial, sans-serif; /* Fuente igual que el menú */
    font-size: 18px; /* Tamaño similar al menú */
    color: rgb(255, 37, 37); /* Mantén el color blanco */
    margin-right: 80px; /* Espaciado a la izquierda */
    display: block; /* Centra el botón */
    text-align: center; /* Centra el texto del botón */
}


footer {
    text-align: center; /* Centra el texto horizontalmente */
    margin: 20px auto; /* Espaciado para separarlo de los límites */
    padding: 10px 0; /* Espaciado interno arriba y abajo */
    color: #ffffff; /* Color gris oscuro */
    font-family: Arial, sans-serif; /* Fuente igual a la del menú principal */
    font-size: 14px; /* Tamaño de la letra */
    font-weight: bold; /* Negrita */
}

/* Texto principal */
h1, p {
    position: relative;
    z-index: 1; /* Asegura que el texto esté por encima del fondo */
}

/* Fondo animado */
#matrix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: -1; /* Fondo detrás del contenido */
}

/* ------------------------------------------------------------------------ */

/* Contenedor del nuevo apartado */
.new-section {
    display: flex; /* Menú a la izquierda y contenido a la derecha */
    gap: 10px; /* Espaciado entre el menú y el contenido */
    padding: 20px;
}

/* Menú lateral */
.sidebar {
    background-color: #00000000; /* Fondo oscuro */
    color: rgb(255, 255, 255); /* Texto en blanco */
    width: 250px; /* Ancho fijo */
    padding: 20px;
    border-radius: 8px; /* Bordes redondeados */
}

.sidebar h3 {
    margin-top: 0;
    color: #ff3333; /* Rojo para destacar los títulos */
}


.sidebar li {
    margin-bottom: 10px; /* Espaciado entre opciones */
}

.sidebar a {
    color: white; /* Color blanco para los enlaces */
    text-decoration: none; /* Sin subrayado */
}

.sidebar a:hover {
    color: #ff3333; /* Color rojo claro al pasar el ratón */
}

.submenu {
    margin-left: 20px; /* Indentar submenús */
    list-style: circle; /* Viñetas circulares */
}

/* Área principal de contenido */
.content-area {
    flex: 1; /* Ocupa el resto del espacio disponible */
}

.content-area h2 {
    color: #fd2121; /*  para los títulos */
    text-align: left;
}

.content-area p {
    text-align: justify; /* Justificar texto */
}

/* Recuadros de temas */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsivo */
    gap: 20px; /* Espaciado entre recuadros */
}

.card {
    background-color: #181818; /* Fondo oscuro para recuadros */
    padding: 20px;
    border-radius: 8px; /* Bordes redondeados */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

.card img {
    width: 100%; /* Imagen responsiva */
    height: auto; /* Mantener proporciones */
    border-radius: 5px; /* Bordes redondeados para las imágenes */
    margin-bottom: 10px; /* Espaciado inferior */
}

.card h3 {
    color: #ff6666; /* Rojo claro para los títulos */
    margin-bottom: 10px;
}

.card p {
    font-size: 14px;
    color: #c9d1d9; /* Texto gris claro */
    text-align: justify;
}


/* */

.sidebar ul {
    list-style: none; /* Quitar viñetas */
    padding: 0;
    margin: 0;
    /* font-family: 'Arial', sans-serif; */
}

.sidebar .submenu {
    display: none; /* Ocultar los submenús por defecto */
    margin-left: 20px; /* Indentar subtemas */
    list-style: circle; /* Viñetas circulares */
    padding: 5px 0;
}

.sidebar .expandable > .toggle::after {
    content: "❯"; /* Flecha a la derecha */
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.sidebar .expandable.open > .toggle::after {
    transform: rotate(90deg); /* Rotar la flecha hacia abajo */
}

.sidebar .submenu a {
    text-decoration: none; /* Sin subrayado */
    color: white;
}

.sidebar .submenu a:hover {
    color: #ff9999; /* Rojo claro al pasar el ratón */
}

.logo {
    width: 100px; /* Ajusta el ancho del logo */
    height: auto; /* Mantiene las proporciones */
    margin-left: 80px; /* Espaciado a la izquierda */
}