/* --- INICIO CODIGO PORTADA GRANDE --- */

/* 1. Ampliar el contenedor de la portada */
.homepage-image, .obj_issue_toc .cover {
    width: 100% !important;  /* Fuerza a usar todo el ancho disponible */
    max-width: none !important; /* Elimina los límites del tema */
    text-align: center; /* Centra la imagen */
    margin-bottom: 30px; /* Un poco de espacio debajo */
}

/* 2. Ajustar la imagen dentro del contenedor */
.homepage-image img, .obj_issue_toc .cover img {
    width: auto; /* Deja que el ancho natural de la imagen mande */
    height: auto;
    max-height: 600px; /* LÍMITE DE SEGURIDAD: Evita que una imagen muy alta ocupe toda la pantalla verticalmente. Ajusta este número si lo necesitas */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Opcional: añade una sombra suave para que destaque */
}

/* --- FIN CODIGO PORTADA GRANDE --- */


/* --- INICIO CODIGO ARCHIVOS EN 2 COLUMNAS --- */

/* 1. Convertir la lista en una cuadrícula inteligente */
.page_issue_archive ul.issues_media_list, 
.page_issue_archive .issues_archive {
    display: grid !important; /* Activar modo cuadrícula */
    /* La siguiente línea es la magia: crea columnas de mínimo 300px. 
       Si caben dos, pone dos. Si no (celular), pone una. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 40px; /* Espacio entre los números (horizontal y vertical) */
    list-style-type: none !important; /* Quitar los puntitos de la lista si aparecen */
    padding-left: 0; /* Quitar margen izquierdo innecesario */
}

/* 2. Asegurar que cada bloque de revista se vea ordenado */
.page_issue_archive .issue-summary,
.page_issue_archive .obj_issue_summary {
    height: 100%; /* Para que todos los cuadros tengan la misma altura */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Opcional: Un marco muy sutil alrededor de cada número */
    padding: 20px;
    border-radius: 8px;
    background-color: #fff; /* Fondo blanco para cada bloque */
}

/* 3. Ajustar las imágenes de portada en la cuadrícula */
.page_issue_archive .cover img {
    max-width: 100% !important;
    height: auto;
    /* Opcional: hace que todas las portadas tengan la misma altura forzada, 
       útil si tus imágenes son muy desiguales, si no, borra la línea de abajo */
    /* max-height: 300px; object-fit: cover; */ 
}

/* --- FIN CODIGO ARCHIVOS EN 2 COLUMNAS --- */


/* --- INICIO CODIGO CABECERA ANCHO TOTAL (FULL WIDTH) --- */

/* 1. Desbloquear el contenedor principal de la cabecera */
/* Esto elimina los márgenes laterales que el tema pone por defecto */
.pkp_structure_page > header,
header.pkp_structure_head {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important; /* Quitar colchón izquierdo */
    padding-right: 0 !important; /* Quitar colchón derecho */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Forzar a la imagen a estirarse para llenar ese nuevo espacio */
/* Le decimos a la imagen que ignore su tamaño real y ocupe todo el sitio */
.pkp_site_name_wrapper img,
header .pkp_site_name img,
.pkp_head_wrapper img {
    width: 100% !important;
    max-width: none !important; /* Importante: rompe el límite del tema */
    height: auto !important; /* Mantiene la proporción para que no se vea "chata" */
    display: block !important; /* Se asegura de que ocupe toda la línea */
    object-fit: cover; /* Asegura que cubra el área sin dejar huecos */
}

/* --- FIN CODIGO CABECERA ANCHO TOTAL --- */