body {
    font-family: "IM Fell DW Pica", serif;
    background: #111;
    color: #ddd;
    background-image: url("../img/fondo_pagina_web.jpg"); /* Ruta hacia tu imagen */
    background-size: cover;                    /* Hace que la imagen cubra toda la pantalla */
    background-position: center;               /* Centra la imagen de fondo */
    background-attachment: fixed;              /* Hace que el fondo se quede quieto al hacer scroll (opcional) */
    background-repeat: no-repeat;              /* Evita que la imagen se duplique como mosaico */
}

#container {
    max-width: 1000px;   /* REDUCIDO: De 1200px a 1000px para compactar toda la web hacia el centro */
    margin: 0 auto;      
    padding: 0 20px;     
    box-sizing: border-box;
}

#flex {
    display: flex;
    gap: 0;              /* CORREGIDO: Eliminamos el espacio vacío de 50px entre la barra y el contenido */
    align-items: stretch;
}

#leftSidebar {
    width: 250px;
    background: #1a1a1a;
    padding: 20px;
    box-sizing: border-box;
    flex-shrink: 0;      /* ASEGURADO: Evita que la barra lateral se encoja de sus 250px */
}

main {
    flex: 1;
    background-color: #1a1a1a; /* El mismo fondo que ya tenías */
    padding: 30px;             /* Un poco más de espacio interno para el texto */
    margin: 0;
    min-width: 0;        
    box-sizing: border-box;
}

.box {
    background: #111;
    padding: 10px;
    border: 1px solid #333;
}

#showComic {
    text-align: center;
}

#showComic img {
    max-width: 100%;     /* Optimizado para que el cómic no se salga de su lugar */
    height: auto;
}

#authorNotes {
    margin-top: 30px;
}

/* ==========================================================================
   RESPONSIVE: Controla cómo se ve en pantallas pequeñas y celulares
   ========================================================================== */
@media(max-width: 800px) {
    #flex {
        display: flex;
        flex-direction: column; /* En celular pone la barra arriba y el cómic abajo */
        align-items: stretch;
        gap: 30px;
    }

    #leftSidebar {
        width: 100%;
    }
}

/* ==========================================================================
   PERSONAJES: Corrección de alineación y textos largos
   ========================================================================== */
.charTable {
    width: 100%;         /* Hace que la tabla ocupe todo el espacio disponible */
    border-collapse: collapse;
}

.charTable td {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
}

.charTable img {
    width: 150px;
    height: auto;
    flex-shrink: 0;
}

/* Contenedor del nombre y la descripción */
.charInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;            /* Espaciado interno entre título y descripción */
    flex: 1;             /* Obliga al texto a usar el espacio que sobra al lado de la foto */
    min-width: 0;        /* Fuerza al texto a saltar de línea automáticamente */
}

.charInfo p {
    word-wrap: break-word;
    line-height: 1.5;    /* Hace el texto largo mucho más legible */
    margin: 0;
}

/* ==========================================================================
   OTROS COMPONENTES (Menú, Banner, Redes)
   ========================================================================== */
.sidebarLogo {
    width: 250px;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
}

.comicNav img {
    width: 50px;
    height: auto;
}

#topBanner {
    text-align: center;
    margin: 20px 0;
}

#topBanner img {
    width: 300px;
    max-width: 80%;
    height: auto;
    display: inline-block;
}

#topNav {
    display: flex;
    justify-content: center;
    align-items: stretch;    /* Hace que todos los botones estiren su altura al máximo de la barra */
    gap: 20px;               /* Espacio de separación entre los rectángulos */
    background: #111;        /* Color del menú superior */
    padding: 0;              /* Eliminamos paddings para que los rectángulos toquen los bordes */
    border-bottom: none;
}

#topNav a {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    padding: 15px 25px;      /* Esto define el tamaño del rectángulo alrededor de la palabra */
    display: inline-block;
    transition: 0.2s;
}

/* Opcional: Si quieres que al pasar el mouse por encima de los otros se note el rectángulo sutilmente */
#topNav a:hover {
    background-color: #222; 
    color: #fff;
}

.socialLinks {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.socialLinks img {
    width: 40px;
    height: auto;
    transition: 0.2s;
}

.socialLinks img:hover {
    transform: scale(1.1);
}

#leftSidebar h3 {
    text-align: center;
}

.sidebarBanner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.bannercitos-img {
    display: block;
    max-width: 800px;       /* Ajusta este número al tamaño máximo que desees */
    width: 100%;            /* Se encoje correctamente en pantallas pequeñas */
    height: auto;
    margin: 25px auto;      /* CORREGIDO: Centrado automático horizontal perfecto */
}