body {
    background-color: var(--bg-color2); /* Color de fondo por si el GIF tarda en cargar */
    background-image: url('images/background.gif'); /* ¡Aquí está tu GIF! */
    background-repeat: repeat; /* Hace que el GIF se repita como un mosaico por toda la pantalla */
    margin: 0;
}
/* ==========================================
   VARIABLES Y COLORES PRINCIPALES
   ========================================== */
:root {
    --header-bg: url("images/header.jpg");
    --accent-color: #ff9ebe;
    --link-color: #ff6699;
    --bg-color: #ffb3c6;
    --bg-color2: #ffc7d4;
    --text-color: #5a1f31;
    --favorite-color: #ffe6eb;
    --lighter-color: #fff5f7; /* Color extra para el fondo del avatar */
    
    /* Colores para las rayas del menú lateral */
    --stripe-color: #fff5f7;
    --stripe-color2: #ffb3c6;
}

/* ==========================================
   ESTILOS GENERALES
   ========================================== */
* {
    color: var(--text-color);
    font-family: monospace;
    border-radius: 1em;
}

::selection {
    background: var(--accent-color);
    color: var(--bg-color);
}

body {
    background-color: var(--bg-color2);
    margin: 0;
}

p {
    line-height: 1.5em;
}

ul { 
    list-style-type: "❤︎ "; 
}

a {
    color: var(--link-color);
    border-radius: .3em;
    text-shadow: var(--bg-color) 1px 1px 2px;
    font-weight: bold;
    transition: background-color 400ms ease-out;
}

a:visited { color: var(--text-color); }
a:hover {
    background-color: var(--accent-color);
    color: var(--text-color);
}

/* ==========================================
   CABECERA (HEADER)
   ========================================== */
header {
    background-color: var(--accent-color);
    background: var(--header-bg);
    background-size: 100%;
    background-position: center;
    min-height: 200px;
    margin: 0 auto;
    border-top: 4px solid var(--text-color);
    border-bottom: 4px solid var(--text-color);
    border-radius: 0;
}

header > h1 {
    margin: 55px auto;
    border-radius: .3em;
    max-width: 900px;
    padding: 12px;
    font-size: 4em;
    text-align: center;
    background-color: var(--bg-color);
    border: 2px solid var(--text-color);
    text-shadow: var(--bg-color2) 1px 1px 3px;
}

/* ==========================================
   ESTRUCTURA PRINCIPAL (FLEXBOX)
   ========================================== */
#content {
    display: flex;
    max-width: 960px;
    margin: auto;
}

/* ==========================================
   BARRA LATERAL (SIDEBAR)
   ========================================== */
#sidebar {
    background-image: linear-gradient(45deg, var(--stripe-color) 25%, var(--stripe-color2) 25%, var(--stripe-color2) 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, var(--stripe-color2) 75%, var(--stripe-color2) 100%);
    background-size: 65.05px 65.05px;
    min-width: 220px;
    margin: 1em;
    padding: 1em;
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
}

#avatar {
    margin: .5em auto;
    box-shadow: var(--accent-color) 4px 4px;
    max-width: 164px;
    max-height: 164px;
    border-radius: 1.5em;
}

#avatar img {
    background: var(--lighter-color);
    max-width: 160px;
    border: 2px solid var(--text-color);
    border-radius: 1.5em;
}

#bio {
    margin: 1em;
    background: var(--favorite-color);
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
    text-shadow: var(--bg-color2) 0 0 2px;
    text-align: center;
}

#bio p { margin: 1em; }

/* ==========================================
   NAVEGACIÓN Y BOTONES DEL MENÚ
   ========================================== */
nav {
    padding: 0;
    margin: 1em 0;
    font-weight: bold;
}

/* Apilamos los botones normales en vertical (Home, Link 1, etc.) */
nav .menu-fijo,
nav .menu-grupo {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre botones */
    margin: 1em auto;
    padding-left: 0;
    list-style-type: none;
}

nav li { text-align: center; }

/* Estilo estético de los botones */
nav li > a {
    background-color: var(--favorite-color);
    box-shadow: var(--accent-color) 4px 4px;
    padding: .5em 1em;
    display: block; /* Ayuda a que ocupen bien el espacio */
    text-decoration: none;
    border: 2px solid var(--text-color);
    border-radius: 10px;
}

nav li > a:hover {
    box-shadow: var(--text-color) 4px 4px;
}

/* Forzar texto oscuro en los enlaces del menú en todos los estados */
nav ul li a,
nav ul li a:link,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
    color: var(--text-color); 
}

/* ==========================================
   PAGINACIÓN (FLECHAS)
   ========================================== */
.paginacion-controles {
    display: flex;
    flex-direction: row; /* Fuerza la fila horizontal */
    justify-content: center; /* Centra las flechas */
    gap: 12px;
    padding: 0;
    margin-top: 25px;
    list-style: none;
    width: 100%;
}

.paginacion-controles li {
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
}

.paginacion-controles .btn-flecha {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.3rem;
    text-decoration: none;
    background: var(--favorite-color);
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 3px 3px;
    border-radius: 8px;
}

/* ==========================================
   CONTENIDO PRINCIPAL (MAIN)
   ========================================== */
main {
    background-color: var(--favorite-color);
    padding: 1em 2em;
    margin: 1em;
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
    text-shadow: var(--bg-color2) 1px 1px 3px;
    flex-grow: 1; /* Permite que el main ocupe el espacio restante */
}

main > h1,
main > h2,
main > h3 {
    background-color: var(--bg-color);
    border-radius: .4em;
    padding: .2em .5em;
    text-shadow: var(--bg-color2) 1px 1px 3px;
}
main {
    background-color: var(--favorite-color);
    /* Aumentamos el padding de abajo a 80px para que el texto no pise las fechas */
    padding: 1em 2em 80px 2em; 
    margin: 1em;
    border: 2px solid var(--text-color);
    box-shadow: var(--accent-color) 4px 4px;
    text-shadow: var(--bg-color2) 1px 1px 3px;
    flex-grow: 1;
    
    /* ESTA ES LA CLAVE MÁGICA: */
    position: relative; 
}

/* El nuevo estilo infalible para empujar al fondo */
.fechas-al-fondo {
    position: absolute;
    bottom: 25px; /* Lo pega a 25px exactos del borde de abajo */
    left: 2em;    /* Lo alinea con el margen izquierdo de tu texto */
}
/* ==========================================
   FOOTER
   ========================================== */
footer {
    background-color: var(--bg-color);
    text-shadow: var(--bg-color2) 1px 1px 3px;
    text-align: center;
    font-size: small;
    padding: 1em;
    margin: 1em auto;
    max-width: 960px;
    border: 2px solid var(--text-color);
}

/* ==========================================
   ADAPTACIÓN PARA MÓVILES (RESPONSIVE)
   ========================================== */
@media only screen and (max-width: 800px) {
    #content {
        flex-wrap: wrap; /* Permite que el sidebar pase arriba del main */
    }
    #sidebar {
        width: 100%;
        display: flex;
        flex-direction: column; /* Apila los elementos del sidebar en móvil */
        justify-content: center;
        align-items: center;
        border: none;
        box-shadow: none;
        background-image: none; /* Opcional: quita el fondo de rayas en móvil para que no sature */
        background-color: var(--bg-color);
    }
    header { min-height: 160px; }
    header > h1 { 
        font-size: 3em;
        margin: .4em;
    }
    #avatar { margin: 0 1em; }
    #bio { width: 90%; }
    
    /* En móvil, los botones vuelven a ser horizontales o se adaptan */
    nav .menu-fijo,
    nav .menu-grupo {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    main { margin: 0 1em; }
    footer { margin: 1em; }
}
/* ==========================================
   CONTROL DE VISIBILIDAD DE PAGINACIÓN (Mejorado)
   ========================================== */
.menu-grupo {
    display: none !important;
}

.menu-grupo.active {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
}