/* =====================================================================
   Revista Summa de Arithmetica — Personalización de la tabla de contenidos
   ---------------------------------------------------------------------
   Tema:     OJS 3.3.0.21 · Default
   Alcance:  número actual (portada) y páginas de cada número (.obj_issue_toc)
   Uso:      cargar como "Hoja de estilos de la revista"
             (Configuración → Sitio web → Apariencia). Se aplica DESPUÉS
             del tema, por lo que no requiere !important.
   Incluye:  1) miniaturas de portada más pequeñas
             2) un marco elegante alrededor de cada artículo
   ===================================================================== */


/* ----------------------------------------------------------------------
   1. TOKENS DE DISEÑO  (ajusta los valores solo aquí)
   ---------------------------------------------------------------------- */
.obj_issue_toc {
    /* Miniaturas de portada */
    --sda-cover-w:        110px;    /* ancho máx. de la portada */
    --sda-cover-h:        130px;    /* alto  máx. de la portada */

    /* Marco de cada artículo */
    --sda-accent:         #2f4a6b;  /* borde en hover — dorado Pacioli: #b0893c */
    --sda-frame:          #d5dbe3;  /* borde en reposo (un pelín más marcado) */
    --sda-frame-w:        1.5px;    /* grosor del borde en reposo y hover */
    --sda-card-bg:        #ffffff;
    --sda-radius:         12px;
    --sda-pad:            1.3rem 1.5rem;
    --sda-gap:            1rem;      /* separación entre marcos */
    --sda-shadow:         0 1px 2px rgba(22,30,46,.04), 0 4px 14px rgba(22,30,46,.05);
    --sda-shadow-hover:   0 2px 5px rgba(22,30,46,.07), 0 14px 30px rgba(22,30,46,.12);
}


/* ----------------------------------------------------------------------
   2. PORTADAS MÁS PEQUEÑAS EN LA TOC
   ---------------------------------------------------------------------- */
.obj_issue_toc .obj_article_summary .cover {
    width: auto;                        /* anula la columna del 25% del tema */
    max-width: var(--sda-cover-w);
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.obj_issue_toc .obj_article_summary .cover img {
    max-height: var(--sda-cover-h);
    max-width: 100%;
    height: auto;
    width: auto;
}


/* ----------------------------------------------------------------------
   3. MARCO ELEGANTE POR ARTÍCULO
   ---------------------------------------------------------------------- */
.obj_issue_toc .articles > li            { margin-bottom: var(--sda-gap); }
.obj_issue_toc .articles > li:last-child { margin-bottom: 0; }

.obj_issue_toc .obj_article_summary {
    background: var(--sda-card-bg);
    border: var(--sda-frame-w) solid var(--sda-frame);
    border-radius: var(--sda-radius);
    padding: var(--sda-pad);
    box-shadow: var(--sda-shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.obj_issue_toc .obj_article_summary:hover {
    border-color: var(--sda-accent);
    box-shadow: var(--sda-shadow-hover);
    transform: translateY(-2px);
}

/* El título arranca pegado al borde superior del marco */
.obj_issue_toc .obj_article_summary > .title { margin-top: 0; }


/* ----------------------------------------------------------------------
   4. ENCABEZADO DEL NÚMERO ACTUAL — los tres datos en una sola línea
   ----------------------------------------------------------------------
   Los tres elementos viven en niveles distintos del DOM:
     .current_issue > h2                              → "Número actual"
     .current_issue > .current_issue_title            → "Núm. 12 (2025)"
     .current_issue > .obj_issue_toc > .heading > .published → "Publicado: ..."
   Con display:contents aplanamos los contenedores intermedios para que los
   tres compartan la misma fila flex; el resto del número baja a otra fila.  */
.current_issue {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .6rem;
    row-gap: 0;
}

.current_issue > .obj_issue_toc,
.current_issue .obj_issue_toc > .heading { display: contents; }

.current_issue > h2,
.current_issue .current_issue_title,
.current_issue .obj_issue_toc .heading .published {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

/* Separador discreto "·" tras los dos primeros */
.current_issue > h2::after,
.current_issue .current_issue_title::after {
    content: "·";
    margin-left: .6rem;
    color: #9aa1ac;
    font-weight: 400;
}

/* Todo lo demás del número (portada, galeradas, listado, enlace) ocupa
   su propia fila y no rompe la línea del encabezado */
.current_issue .obj_issue_toc .heading .cover,
.current_issue .obj_issue_toc .heading .description,
.current_issue .obj_issue_toc .heading .pub_id,
.current_issue .obj_issue_toc > .galleys,
.current_issue .obj_issue_toc > .sections,
.current_issue .read_more {
    flex: 0 0 100%;
}
.current_issue .obj_issue_toc > .sections { margin-top: 1.2rem; }


/* ----------------------------------------------------------------------
   5. OPCIONALES  (descomenta si los quieres)
   ---------------------------------------------------------------------- */

/* 4a. Marco clásico tipo "passe-partout" (paspartú marfil).
       Sustituye la sombra del marco y da un poco más de aire interno. */
/*
.obj_issue_toc .obj_article_summary {
    box-shadow: var(--sda-shadow), inset 0 0 0 5px #f6f3ec;
    padding: 1.6rem 1.8rem;
}
*/

/* 4b. Más separación entre secciones (Editorial, Artículos, Reflexión). */
/*
.obj_issue_toc .sections .section { margin-top: 3rem; }
*/