/* Reset y configuraciones globales */
html, body, ol, ul, li, a, * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

*, *::after, *::before {
    box-sizing: inherit;
}

/* Estilo base del cuerpo */
body {
    font-family: 'Roboto', 'Arial', sans-serif;
    background-color: #0a0f24;
    color: #d8e0ff;
    line-height: 1.6;
}

/* Encabezado */
header {
    padding: 2em 0;
    background-color: #141b38;
    color: #d8e0ff;
    text-align: center;
    margin-bottom: 2em;
    border-bottom: 2px solid #00d4ff;
}

/* Pie de página */
footer {
    padding: 2em 0;
    background-color: #141b38;
    color: #d8e0ff;
    text-align: center;
    margin-top: 2em;
    border-top: 2px solid #00d4ff;
}

/* Contenedor principal */
.contenedor {
    display: flex;
    flex-direction: column;
    margin: 0 2em;
    align-items: center;
}

/* Contenido genérico */
.contenido {
    background-color: #141b38;
    margin-bottom: 1.5em;
    padding: 2em;
    border-radius: 10px;
    border: 1px solid #00d4ff;
    transition: transform 0.3s ease;
}

.contenido:hover {
    transform: translateY(-5px);
}

/* Contenido específico del índice */
.contenido-index {
    margin-bottom: 1.5em;
    padding: 2em;
    max-width: 600px;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
}

/* Contenido de notas */
.contenido-notas {
    background-color: #ff2079;
    margin: 0;
    padding: 1.5em;
    border-radius: 10px;
}

.contenido li {
    padding: 0 0 1.5em;
    text-align: left;
    color: #d8e0ff;
}

/* Contenedor de módulos */
.contenedor-modulos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 2em;
    gap: 2em;
}

.contenedor-modulos > .contenido-modulos {
    flex: 1 1 300px;
    margin: 0;
    background-color: #0a0f24;
    border: 1px solid #00d4ff;
    border-radius: 10px;
    padding: 1.5em;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.contenido-modulos:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 800px) {
    .contenedor-modulos {
        flex-direction: column;
        margin: 0 1em;
    }
}

.contenido-modulos li {
    margin-bottom: 1.5em;
}

.contenido-modulos a {
    color: #00d4ff;
    font-size: 1.2em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contenido-modulos a:hover {
    color: #ff9f00;
}

/* Menú */
.lista-menu {
    display: flex;
    justify-content: center;
    padding: 1em 0;
}

.lista-menu li {
    padding: 1em;
}

/* Listas de hitos */
.lista-hitos li {
    display: flex;
    flex-direction: column;
    text-indent: 2em;
    line-height: 1.5;
    color: #d8e0ff;
}

.lista-hitos-interna li, 
.lista-hitos-interna-b li, 
.lista-hitos-interna-b-dos li, 
.lista-hitos-interna-c li, 
.lista-hitos-interna-d li {
    padding-left: 3em;
    color: #d8e0ff;
}

/* Definiciones */
dl { margin: 0; padding: 0; }
dt { font-size: 1.4em; color: #d8e0ff; padding-bottom: 1em; text-align: left; }
dd { font-size: 1.2em; color: #d8e0ff; padding-bottom: 1em; text-indent: 3em; text-align: left; font-style: italic; }

/* Botones */
.boton {
    border-radius: 5px;
    background-color: #00d4ff;
    color: #0a0f24;
    padding: 0.7em 1.5em;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.boton:hover {
    background-color: #ff9f00;
}

.boton-historia {
    background-color: #ff2079;
}

.boton-historia:hover {
    background-color: #ff9f00;
}

/* Títulos */
.titulo-general {
    color: #d8e0ff;
    font-size: 2.2em;
    text-shadow: 0 2px 4px rgba(0, 212, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    text-align: center;
}

.titulo-principal {
    color: #00d4ff;
    font-size: 1.8em;
    text-shadow: 0 2px 4px rgba(0, 212, 255, 0.3);
    margin-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: center;
}

.subtitulo {
    color: #ff9f00;
    font-size: 1.6em;
    text-shadow: 0 2px 4px rgba(0, 212, 255, 0.3);
    margin-bottom: 1.5em;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: center;
}

.sub-subtitulo {
    font-weight: bold;
    margin-bottom: 1em;
    color: #d8e0ff;
}

.subtitulo-interno, .subtitulo-interno-b {
    color: #ff2079;
    font-size: 1.3em;
    text-shadow: 0 2px 4px rgba(0, 212, 255, 0.3);
    padding-top: 1em;
    margin-bottom: 1em;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: left;
}

/* Párrafos */
.parrafo-listas, .parrafo-listas-em {
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 1.5em;
    margin-top: 1.5em;
    color: #d8e0ff;
}

.parrafo-prosa {
    text-align: left;
    font-size: 1.1em;
    margin-bottom: 1em;
    color: #d8e0ff;
}

.parrafo-referencia {
    text-align: left;
    font-size: 1.1em;
    margin-bottom: 1em;
    color: #00ff00;
    font-style: italic;
}

/* Código (corregido para evitar sobreposición) */
pre, code {
    background-color: #1e2a44; /* Fondo más claro para contraste */
    color: #00ffff; /* Cian brillante */
    padding: 1em;
    border-radius: 10px;
    border: 1px solid #00d4ff;
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(0, 212, 255, 0.3);
    font-family: 'Courier New', Courier, monospace;
    white-space: pre; /* Respeta saltos de línea y espacios como en el original */
    line-height: 1.5; /* Espaciado claro entre líneas */
}

code {
    font-size: 1em;
    display: inline-block; /* Para códigos inline */
    white-space: pre-wrap; /* Solo para inline, permite ajuste */
}

/* Responsividad */
@media (max-width: 800px) {
    .contenedor { margin: 0 1em; }
    .titulo-general { font-size: 1.8em; }
    .titulo-principal { font-size: 1.5em; }
    pre, code { font-size: 0.9em; padding: 0.5em; }
}

@media (max-width: 600px) {
    .contenedor-modulos > .contenido-modulos { flex: 1 1 100%; }
    .contenido { padding: 1em; }
}