body, html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "retrobank";/* Evita que aparezca barra de desplazamiento abajo */
}


table {
  width: 100%;
  border-collapse: collapse; /* Une los bordes dobles en uno solo */
  font-family: Arial, sans-serif;
}

th, td {
  padding: 15px; /* Espacio interno de las celdas */
  text-align: left; /* Alineación del texto */
  border-bottom: 1px solid #ddd; /* Línea divisoria gris */
}

th {
  background-color: indigo; /* Color de fondo del encabezado */
  color: white; /* Color de texto del encabezado */
}
tr:hover {
  background-color: black; /* Efecto visual al pasar el cursor */
}



/* Ocultar sub-contenidos por defecto */
.sub-contenido {
    display: none;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5); /* Un toque de transparencia */
    border-radius: 8px;
    margin-top: 15px;
}

/* Estilo de los botones del sub-menú */
.sub-menu {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid DarkOrchid;
    padding-bottom: 10px;
}

.sub-menu button {
    background: Lavender;
    border: 2px solid DarkOrchid;
    color: Indigo;
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'romantic', serif;
    border-radius: 5px;
    transition: 0.3s;
}

.sub-menu button:hover {
    background: indigo;
    color: white;
}
.sticker-cuerpo {
    position: absolute; /* Se queda en una coordenada fija del documento */
    top: 500px;  /* Aparecerá a esa altura específica de la página */
    left: 50px;
    width: 100px;
    image-rendering: pixelated;
    z-index: 999;/* Si es un sticker de píxeles */
}
.contenedor-mosaico {
    display: grid;
    grid-template-columns: 1fr 3fr; 
    gap: 25px;
    max-width: 1200px; /* Un poco más ancho para la biblioteca */
    margin: 40px auto;
    align-items: start; /* IMPORTANTE: evita que la caja pequeña se estire hacia abajo */
}

.caja-lateral {
    background-color: MidnightBlue;
    color: white;
    padding: 20px;
    border-radius: 12px;
    border: 6px ridge DarkOrchid;
    
    /* MAGIA: Se queda fija al bajar */
    position: sticky;
    top: 20px; /* Distancia desde el borde superior de la pantalla */
    max-height: 80vh; /* Evita que el menú sea más alto que la pantalla */
    overflow-y: auto; /* Si tienes muchos links, permite bajar dentro del menú */
}

.caja-principal {
    background-color: Indigo;
    color: GhostWhite;
    padding: 40px;
    border-radius: 12px;
    border: 7px double DarkOrchid;
    min-height: 150vh; /* Altura de ejemplo para probar el scroll */
}
/* 1. Ocultamos todas las secciones por defecto */
.seccion-lectura {
    display: none; 
    animation: aparecer 0.5s ease; /* Un efecto suave al aparecer */
}

/* 2. La sección que sea el "target" se muestra */
.seccion-lectura:target {
    display: block;
}

/* 3. Mostrar la sección de inicio por defecto si no hay nada seleccionado */
/* (Opcional: Si quieres que al entrar ya haya algo, usa :first-child o deja una fija) */
#inicio {
    display: block;
}
/* Pero si hay un target activo, ocultamos el inicio */
:target ~ .caja-principal #inicio, 
.seccion-lectura:target ~ #inicio {
    display: none;
}

/* Estética del menú de la izquierda */
.menu-biblioteca a {
    display: block;
    color: GhostWhite;
    text-decoration: none;
    padding: 10px;
    margin-bottom: 5px;
    border-bottom: 1px dashed #ddd;
    transition: 0.3s;
}

.menu-biblioteca a:hover {
    background: #f0f0f0;
    padding-left: 15px;
}

/* Animación opcional para que el texto no aparezca de golpe */
@keyframes aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ajuste para celulares: que se pongan una sobre otra */
@media (max-width: 768px) {
    .contenedor-mosaico {
        grid-template-columns: 1fr;
    }
}
/* 1. Fondo fijo de estrellas */
.fondo-estrellas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../fondos/stars3.gif");
  background-repeat: repeat; /* Para que sea mosaico */
  z-index: -2; /* Al fondo de todo */
}

/* 2. Capa de figuras en movimiento */
.capa-movimiento {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Ocupa todo el alto */
  background-image: url("../fondos/figures.png");
  background-repeat: repeat-x; /* Se repite solo horizontalmente */
  background-size: auto 100%; /* Ajusta el alto al 100% de la pantalla */
  z-index: -1; /* Por encima de las estrellas, pero detrás del texto */
  
  /* Aplicamos la animación */
  animation: carrusel-infinito 30s linear infinite;
}

/* 3. La animación de desplazamiento */
@keyframes carrusel-infinito {
  from {
    background-position: 0 0;
  }
  to {
    /* Movemos el fondo hacia la izquierda */
    /* Nota: Si quieres que vaya más rápido, baja los 20s de arriba */
    background-position: -2000px 0; 
  }
}
@font-face {
    font-family: 'retrobank';
    src: url('../tipografias/retrobank.ttf') format('truetype');
}
@font-face {
    font-family: 'romantic';
    src: url('../tipografias/romantic.ttf') format('truetype');
}