/* ==========================================================================
   1. LAYOUT ESTRUCTURAL GENERAL
   Contenedores principales para Fascículos y Artículos
   ========================================================================== */

.fasciculo-layout-container, 
.articulo-layout-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

/* Ocultar bloque nativo de Omeka para mantener el diseño limpio */
.resource-template-fasciculo-revista-agmer #resources-linked {
    display: none !important;
}

/* ==========================================================================
   2. ESTILOS DE COLUMNAS (FICHA TÉCNICA E ÍNDICE)
   ========================================================================== */

/* Columna Izquierda: Ficha de datos */
.fasciculo-col-datos, 
.articulo-col-ficha {
    flex: 1 1 300px;
    background: #ffffff !important;
    padding: 25px !important;
    border-top: 5px solid var(--primary);
    border-left: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* Columna Derecha: Listado de artículos o Visor */
.fasciculo-col-articulos, 
.articulo-col-contenido {
    flex: 2 1 500px;
}

.articulo-col-contenido h4 {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.8px;
    font-family: 'Open Sans', sans-serif;
}

.articulo-descripcion-box {
     margin-bottom: 30px;
}

/* ==========================================================================
   3. COMPONENTES DE LA FICHA TÉCNICA (METADATOS)
   ========================================================================== */

.ficha-header {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.metadata-compacta .property {
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted #f0f0f0;
}

.metadata-compacta .property:last-child {
    border-bottom: none;
}

/* Etiquetas (Título, Autor, etc.) */
.metadata-compacta dt {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    font-family: 'Open Sans', sans-serif;
}

/* Valores de texto */
.metadata-compacta dd.value {
    font-size: 0.98rem;
    color: #333;
    line-height: 1.4;
    margin-left: 0;
}

/* Título principal dentro de la ficha */
.metadata-compacta .dcterms-title dd.value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111;
}

/* Badge para números de página */
.metadata-compacta .dcterms-identifier dd.value {
    display: inline-block;
    background: #f0f0f0;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.85rem;
    color: #666;
}

/* Separador manual si existen varios valores */
.metadata-compacta .value:not(:last-child):after {
    content: ", ";
}

/* ==========================================================================
   4. CORRECCIÓN DE IMAGEN DEL FASCÍCULO (EN ARTÍCULO)
   Solución al desborde de imagen en la columna izquierda
   ========================================================================== */

.dcterms-isPartOf .resource-link {
    display: block;
    text-decoration: none !important;
}

/* Ajuste de la imagen para que nunca exceda el ancho de la columna */
.dcterms-isPartOf .resource-link img {
    max-width: 100%;       /* Obliga a la imagen a quedarse dentro del cuadro */
    height: auto;          /* Mantiene la proporción */
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: block;
}

/* Nombre del fascículo debajo de la imagen */
.dcterms-isPartOf .resource-name {
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
}

/* ==========================================================================
   5. BOTÓN DE DESCARGA PDF
   ========================================================================== */

.download-box {
    margin: 20px 0;
    text-align: center;
}

.btn-download {
    display: block;
    background-color: var(--primary); /* Naranja AGMER */
    color: white !important;
    padding: 12px 20px;
    border-radius: 5px;
    text-decoration: none !important;
    font-weight: bold;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.btn-download:hover {
    filter: brightness(90%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.file-info {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #888;
}

/* ==========================================================================
   6. ÍNDICE DE ARTÍCULOS (VISTA FASCÍCULO)
   ========================================================================== */

.articulo-card {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.articulo-card:hover {
    padding-left: 10px;
    background-color: #fafafa;
    border-left: 3px solid var(--primary);
}

.articulo-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #333 !important;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

/* ==========================================================================
   7. RESPONSIVE Y BUSQUEDA
   ========================================================================== */

@media (max-width: 850px) {
    .fasciculo-layout-container, .articulo-layout-container {
        flex-direction: column;
    }
    .fasciculo-col-datos, .articulo-col-ficha {
        flex: 1 1 100%;
    }
}

/* Estilos de Búsqueda (Search Layout) */
.item-result {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.result-media { flex: 0 0 130px; }
.result-media img { width: 100%; object-fit: cover; }
.result-title a { color: var(--primary); font-weight: 600; text-decoration: none; }

/*
====== Corrije la visualización ordenada cronológicamente de los fascículos =====
*/


/* Forzar que la cuadrícula ignore el cálculo de Masonry y use filas reales */
.resources.resource-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important; /* Anula el height fijo calculado por JS */
}

.resources.resource-grid li.item.resource {
    position: static !important; /* Quita el posicionamiento absoluto */
    transform: none !important;  /* Elimina el desplazamiento translate3d */
    margin-bottom: 20px;         /* Espaciado entre filas */
}