/*
 * ceij-publicaciones.css — fichas y listados de com_publicaciones.
 *
 * Acompaña a tmpl/publicaciones/coleccion.php, que reproduce la pantalla
 * «Revistas» del rediseño: migas, título de la colección, rejilla de ediciones
 * con año y dos acciones, y el bloque «Sobre esta colección».
 *
 * Se apoya en ceij-componentes.css para botones, rejilla, distintivos y migas.
 */

.ceij .ceij-coleccion {
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--ceij-e-6) var(--ceij-e-5) var(--ceij-e-8);
}

/* --- cabecera --- */

.ceij .ceij-coleccion__cabecera { margin-block: var(--ceij-e-5) var(--ceij-e-7); }

.ceij .ceij-coleccion__titulo {
    font-size: var(--ceij-fs-800);
    color: var(--ceij-c-titulo);
    margin: 0;
    max-width: 22ch;
}

/* --- encabezado de la sección de ediciones --- */

.ceij .ceij-coleccion__encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ceij-e-3) var(--ceij-e-5);
    padding-bottom: var(--ceij-e-3);
    border-bottom: 2px solid var(--ceij-c-borde);
    margin-bottom: var(--ceij-e-5);
}

.ceij .ceij-coleccion__encabezado h2 {
    font-size: var(--ceij-fs-600);
    margin: 0;
}

.ceij .ceij-coleccion__orden {
    margin: 0;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto-suave);
}

/* --- rejilla de ediciones --- */

.ceij .ceij-coleccion__lista { list-style: none; margin: 0; padding: 0; }

.ceij .ceij-edicion {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-5);
    background: var(--ceij-c-superficie);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-medio);
    box-shadow: var(--ceij-sombra);
    height: 100%;
}

.ceij .ceij-edicion__marca {
    position: absolute;
    top: calc(-1 * var(--ceij-e-3));
    left: var(--ceij-e-4);
}

.ceij .ceij-edicion__portada {
    aspect-ratio: 3 / 4;
    border-radius: var(--ceij-r-chico);
    overflow: hidden;
    background: var(--ceij-c-superficie-alt);
}
.ceij .ceij-edicion__portada img { width: 100%; height: 100%; object-fit: cover; }

.ceij .ceij-edicion__anio {
    margin: 0;
    font-family: var(--ceij-f-titulo);
    font-size: var(--ceij-fs-700);
    font-weight: var(--ceij-fw-negrita);
    line-height: 1;
    color: var(--ceij-c-marca);
    font-variant-numeric: tabular-nums;
}

.ceij .ceij-edicion__titulo {
    margin: 0;
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-fuerte);
    line-height: 1.35;
}
.ceij .ceij-edicion__titulo a { color: var(--ceij-c-titulo); text-decoration: none; }
.ceij .ceij-edicion__titulo a:hover { color: var(--ceij-c-marca); text-decoration: underline; }

.ceij .ceij-edicion__acciones {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-2);
    margin-top: auto;
    padding-top: var(--ceij-e-3);
}
/* Botones rectangulares, no píldoras: el diseño les da 6px de radio sobre 46
   de alto. Las «Ver ediciones» del índice sí son píldoras, por eso el cambio
   va acotado a esta tarjeta. */
.ceij .ceij-edicion__acciones .ceij-btn { width: 100%; border-radius: 6px; }

/* --- sobre la colección --- */

.ceij .ceij-coleccion__sobre {
    margin-top: var(--ceij-e-8);
    padding-top: var(--ceij-e-5);
    border-top: 1px solid var(--ceij-c-borde);
}
.ceij .ceij-coleccion__sobre h2 { font-size: var(--ceij-fs-500); }

.ceij .ceij-coleccion__vacio {
    padding: var(--ceij-e-6);
    text-align: center;
    color: var(--ceij-c-texto-suave);
    background: var(--ceij-c-superficie-alt);
    border-radius: var(--ceij-r-medio);
}

.ceij .ceij-coleccion__paginacion { margin-top: var(--ceij-e-7); }

@media (max-width: 575.98px) {
    .ceij .ceij-coleccion { padding-inline: var(--ceij-e-4); }
}

/* =====================================================================
   Índice de Revistas y Boletines — tmpl/colecciones/indice.php
   ===================================================================== */

.ceij .ceij-indice {
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--ceij-e-6) var(--ceij-e-5) var(--ceij-e-8);
}

/* --- último boletín disponible --- */

.ceij .ceij-ultimo {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: var(--ceij-e-6);
    align-items: center;
    margin-block: var(--ceij-e-5) var(--ceij-e-8);
    padding: var(--ceij-e-6);
    background: var(--ceij-c-superficie);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-medio);
    box-shadow: var(--ceij-sombra);
}

.ceij .ceij-ultimo__portada img {
    width: 100%;
    border-radius: var(--ceij-r-chico);
    box-shadow: var(--ceij-sombra-alta);
}

.ceij .ceij-ultimo__eyebrow {
    margin: 0 0 var(--ceij-e-2);
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-fuerte);
    color: var(--ceij-c-titulo);
}

.ceij .ceij-ultimo__titulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-700);
    color: var(--ceij-c-titulo);
}

.ceij .ceij-ultimo__fecha {
    margin: 0 0 var(--ceij-e-4);
    font-weight: var(--ceij-fw-fuerte);
    color: var(--ceij-c-marca);
}

.ceij .ceij-ultimo__texto { margin: 0 0 var(--ceij-e-5); max-width: 60ch; }

.ceij .ceij-ultimo__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ceij-e-3);
}

/* --- bloques --- */

.ceij .ceij-indice__bloque { margin-bottom: var(--ceij-e-8); }

/* La barra del título es un trazo corto a la izquierda, no un subrayado de
   todo el ancho: medido en el diseño, 40px de largo por 3 de grueso. */
.ceij .ceij-indice__titulo {
    font-size: var(--ceij-fs-600);
    margin: 0 0 var(--ceij-e-5);
    color: #072B61;
}
.ceij .ceij-indice__titulo::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-top: var(--ceij-e-3);
    background: var(--ceij-c-marca);
    border-radius: 2px;
}

/* --- tarjetas de colección --- */

.ceij .ceij-colecciones { list-style: none; margin: 0; padding: 0; }

.ceij .ceij-coleccion-tarjeta {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-4);
    background: var(--ceij-c-superficie);
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-medio);
    box-shadow: var(--ceij-sombra);
    height: 100%;
    text-align: center;
}

.ceij .ceij-coleccion-tarjeta__portada {
    aspect-ratio: 3 / 4;
    border-radius: var(--ceij-r-chico);
    overflow: hidden;
    background: var(--ceij-c-superficie-alt);
    display: grid;
    place-items: center;
}
.ceij .ceij-coleccion-tarjeta__portada img { width: 100%; height: 100%; object-fit: cover; }

/* Cuando la colección no tiene portada se dibuja una: azul institucional con
   el título en blanco, al estilo de la que el diseño pinta para «Otras
   temáticas». El diseñador no entregó ese archivo. */
.ceij .ceij-coleccion-tarjeta__sinportada {
    display: grid;
    align-content: center;
    width: 100%;
    height: 100%;
    padding: var(--ceij-e-5);
    background: linear-gradient(160deg, #0B3E79 0%, #072B61 55%, #041E46 100%);
    font-family: var(--ceij-f-titulo);
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
    /* «JURISPRUDENCIAL» en versales mide mas que la caja cuando la ficha se
       estrecha, y se salia por la derecha. */
    overflow-wrap: anywhere;
    color: var(--ceij-c-texto-inverso);       /* 13,9:1 sobre #072B61 */
}

.ceij .ceij-coleccion-tarjeta__titulo {
    margin: 0;
    font-size: var(--ceij-fs-500);
    color: var(--ceij-c-titulo);
}

.ceij .ceij-coleccion-tarjeta__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto-suave);
    line-height: 1.5;
}

.ceij .ceij-coleccion-tarjeta__accion { margin: auto 0 0; padding-top: var(--ceij-e-3); }
.ceij .ceij-coleccion-tarjeta__accion .ceij-btn { width: 100%; }

/* --- boletines por año --- */

.ceij .ceij-anio {
    border: 1px solid var(--ceij-c-borde);
    border-radius: var(--ceij-r-medio);
    margin-bottom: var(--ceij-e-3);
    background: var(--ceij-c-superficie);
    overflow: hidden;
}

.ceij .ceij-anio__resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ceij-e-4);
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-3) var(--ceij-e-5);
    cursor: pointer;
    font-family: var(--ceij-f-titulo);
    font-weight: var(--ceij-fw-fuerte);
    color: var(--ceij-c-titulo);
}
.ceij .ceij-anio__resumen:hover { background: var(--ceij-c-superficie-alt); }

.ceij .ceij-anio__etiqueta { font-size: var(--ceij-fs-600); font-variant-numeric: tabular-nums; }
.ceij .ceij-anio__cuenta {
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-normal);
    color: var(--ceij-c-texto-suave);
}

.ceij .ceij-anio__lista { list-style: none; margin: 0; padding: 0 var(--ceij-e-5) var(--ceij-e-4); }

.ceij .ceij-anio__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-3) 0;
    border-top: 1px solid var(--ceij-c-borde);
}

.ceij .ceij-anio__titulo { flex: 1 1 18rem; }

.ceij .ceij-anio__enlaces { display: flex; gap: var(--ceij-e-2); }
.ceij .ceij-anio__enlaces a {
    display: grid;
    place-items: center;
    min-height: var(--ceij-tactil-min);
    min-width: 4rem;
    padding-inline: var(--ceij-e-3);
    border-radius: var(--ceij-r-chico);
    border: 1px solid var(--ceij-c-borde);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-fuerte);
    color: var(--ceij-c-marca);
    text-decoration: none;
}
.ceij .ceij-anio__enlaces a:hover { background: var(--ceij-c-marca); color: var(--ceij-c-texto-inverso); }

@media (max-width: 767.98px) {
    .ceij .ceij-ultimo { grid-template-columns: 1fr; text-align: center; }
    .ceij .ceij-ultimo__portada { max-width: 220px; margin-inline: auto; }
    .ceij .ceij-ultimo__acciones { justify-content: center; }
}
@media (max-width: 575.98px) {
    .ceij .ceij-indice { padding-inline: var(--ceij-e-4); }
}

/* =====================================================================
   Índice de Revistas y Boletines — ajustes contra el diseño
   ---------------------------------------------------------------------
   El contenedor pasa a 1444, que es el ancho que mide el Figma, y el
   bloque del último boletín toma el fondo azul claro con borde azul.
   ===================================================================== */

.ceij .ceij-indice {
    max-width: calc(1444px + var(--ceij-e-5) * 2);
    padding-top: var(--ceij-e-4);
}

.ceij .ceij-ultimo {
    background: #F7FBFC;
    border: 1px solid #CFE3EE;
    border-radius: 12px;
    box-shadow: none;
}

/* Los dos botones van apilados y a la misma anchura, como en el diseño. */
.ceij .ceij-ultimo__acciones { flex-direction: column; align-items: flex-start; }
.ceij .ceij-btn--ancho {
    width: 100%;
    max-width: 420px;
    justify-content: center;
    gap: var(--ceij-e-4);
    border-radius: var(--ceij-r-medio);
    text-align: left;
}
.ceij .ceij-btn--ancho img { flex: 0 0 auto; width: 22px; height: auto; }

/* --- Boletines mensuales ---------------------------------------------- */

.ceij .ceij-boletines { margin-bottom: var(--ceij-e-6); }
.ceij .ceij-boletines .ceij-indice__titulo { margin-bottom: var(--ceij-e-5); }

.ceij .ceij-anios { display: flex; flex-wrap: wrap; gap: var(--ceij-e-3); margin-bottom: var(--ceij-e-5); }
.ceij .ceij-anio-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-3);
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-2) var(--ceij-e-4);
    border: 1px solid #EEF2F7;
    border-radius: var(--ceij-r-medio);
    background: var(--ceij-c-superficie);
    color: #0A2540;                           /* 15,54:1 */
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-fuerte);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
/* Galón hacia abajo, como en el diseño. Es decorativo: el estado lo lleva
   aria-pressed, no la flecha. */
.ceij .ceij-anio-chip::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.ceij .ceij-anio-chip:hover { background: #F4F8FB; }
.ceij .ceij-anio-chip[aria-pressed="true"] {
    background: #003068;                      /* 12,94:1 con blanco */
    border-color: #003068;
    color: var(--ceij-c-texto-inverso);
}

.ceij .ceij-tabla-boletines { width: 100%; border-collapse: collapse; }
/* Solo la fila de encabezados va en azul: las celdas de mes también son th
   (scope="row") y heredarían el fondo. */
.ceij .ceij-tabla-boletines thead th {
    background: #003068;
    color: var(--ceij-c-texto-inverso);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    padding: var(--ceij-e-4) var(--ceij-e-5);
    text-align: left;
}
.ceij .ceij-tabla-boletines thead th:first-child { border-top-left-radius: var(--ceij-r-medio); }
.ceij .ceij-tabla-boletines thead th:last-child  { border-top-right-radius: var(--ceij-r-medio); }
.ceij .ceij-tabla-boletines td,
.ceij .ceij-tabla-boletines tbody th {
    padding: var(--ceij-e-4) var(--ceij-e-5);
    border-bottom: 1px solid #EDF1F6;
    font-size: var(--ceij-fs-400);
    text-align: left;
    vertical-align: middle;
}
.ceij .ceij-tabla-boletines__mes { font-weight: var(--ceij-fw-negrita); color: #072B61; white-space: nowrap; }
.ceij .ceij-sin-archivo { color: var(--ceij-c-texto-tenue); }

.ceij .ceij-enlace-archivo {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-2);
    min-height: var(--ceij-tactil-min);
    font-weight: var(--ceij-fw-negrita);
    text-decoration: none;
    white-space: nowrap;
}
.ceij .ceij-enlace-archivo img { flex: 0 0 auto; width: 18px; height: auto; }
.ceij .ceij-enlace-archivo:hover { text-decoration: underline; }
.ceij .ceij-enlace-archivo--pdf   { color: #D80600; }   /* 5,32:1 sobre blanco */
.ceij .ceij-enlace-archivo--excel { color: #006A2A; }   /* 6,79:1 sobre blanco */

.ceij .ceij-boletines__mas { margin: var(--ceij-e-5) 0 0; text-align: center; }
.ceij .ceij-boletines__mas .ceij-mas { width: auto; min-width: 240px; margin-inline: auto; }

/* --- Aviso de cierre ---------------------------------------------------- */

.ceij .ceij-aviso-publicaciones {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: start;
    background: #E5ECF1;
    border-radius: 12px;
    padding: var(--ceij-e-5) var(--ceij-e-6);
}
.ceij .ceij-aviso-publicaciones img { width: 28px; height: 28px; }
.ceij .ceij-aviso-publicaciones__titulo {
    margin: 0 0 var(--ceij-e-1);
    font-size: var(--ceij-fs-400);
    color: #072B61;                           /* 11,9:1 sobre #E5ECF1 */
}
.ceij .ceij-aviso-publicaciones__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}

@media (max-width: 991.98px) {
    .ceij .ceij-rejilla--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ceij .ceij-rejilla--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* La tabla se apila: cada celda lleva su rótulo delante. */
    .ceij .ceij-tabla-boletines,
    .ceij .ceij-tabla-boletines tbody,
    .ceij .ceij-tabla-boletines tr,
    .ceij .ceij-tabla-boletines td,
    .ceij .ceij-tabla-boletines tbody th { display: block; width: auto; }
    .ceij .ceij-tabla-boletines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ceij .ceij-tabla-boletines tr {
        border: 1px solid #E4EBF2;
        border-radius: var(--ceij-r-medio);
        margin-bottom: var(--ceij-e-4);
        padding: var(--ceij-e-3);
    }
    .ceij .ceij-tabla-boletines td,
    .ceij .ceij-tabla-boletines tbody th { border-bottom: 0; padding: var(--ceij-e-2) 0; }
    .ceij .ceij-tabla-boletines td::before {
        content: attr(data-rotulo);
        display: block;
        margin-bottom: 4px;
        font-size: var(--ceij-fs-meta);
        font-weight: var(--ceij-fw-negrita);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ceij-c-texto-tenue);
    }
}
/* En el telefono las fichas de coleccion siguen en DOS columnas: en «iPhone 16
   & 17 Pro - 7» miden 171px cada una de los 350 utiles. A una sola columna la
   portada crecia hasta 350px y el indice se iba a mas de 2.000px de alto. */
@media (max-width: 575.98px) {
    .ceij .ceij-rejilla--5 { gap: var(--ceij-e-3); }
    /* El banner de la coleccion lleva la introduccion larga dentro, como en el
       Figma. Alli cabe en 185px porque la compone a 7px; con el minimo de 14px
       de ceij-tokens.css no hay forma de bajar de unos 500, asi que al menos se
       aprieta el interlineado y el aire entre parrafos. */
    .ceij .ceij-banner--alto .ceij-banner__lienzo { min-height: 0; padding: var(--ceij-e-5) var(--ceij-e-4); }
    .ceij .ceij-banner--alto .ceij-banner__nota { line-height: 1.45; }
    .ceij .ceij-banner__nota p { margin-bottom: var(--ceij-e-2); }
    /* Cuatro años por fila, como en el Figma. */
    .ceij .ceij-anios { gap: var(--ceij-e-2); }
    .ceij .ceij-anio-chip { padding-inline: var(--ceij-e-3); font-size: var(--ceij-fs-300); }
    .ceij .ceij-coleccion-tarjeta { padding: var(--ceij-e-3); gap: var(--ceij-e-2); }
    .ceij .ceij-coleccion-tarjeta__titulo { font-size: var(--ceij-fs-400); }
    .ceij .ceij-coleccion-tarjeta__texto  { font-size: var(--ceij-fs-300); }
    .ceij .ceij-coleccion-tarjeta .ceij-btn { padding-inline: var(--ceij-e-2); font-size: var(--ceij-fs-300); }
    .ceij .ceij-coleccion-tarjeta__sinportada { padding: var(--ceij-e-3); font-size: var(--ceij-fs-meta); letter-spacing: 0; }
    .ceij .ceij-btn--ancho { max-width: none; }
}

/* =====================================================================
   Ficha de colección — ajustes contra el diseño
   ===================================================================== */

.ceij .ceij-coleccion { max-width: calc(1444px + var(--ceij-e-5) * 2); }

/* El título del banner va en dos piezas: el genérico arriba, en azul, y el
   nombre de la colección debajo, en verde. */
/* Aquí el texto es largo y no cabe en la proporción fija del arte, así que el
   lienzo deja de regirse por `aspect-ratio` y crece con el contenido. */
.ceij .ceij-banner--alto .ceij-banner__lienzo { aspect-ratio: auto; min-height: 370px; }
/* La columna de texto se queda dentro de la zona clara del arte: medida en el
   diseño, 500px sobre un banner de 1444. Más ancha, las líneas se montan sobre
   el estampado y dejan de leerse. */
.ceij .ceij-banner--alto .ceij-banner__rejilla { grid-template-columns: minmax(0, 520px); }
/* El arte se amplía al crecer el lienzo y la zona clara se estrecha, así que el
   texto acabaría sobre el estampado. Un velo del mismo crema lo sostiene sea
   cual sea el alto. */
.ceij .ceij-banner--alto .ceij-banner__lienzo {
    background-image: linear-gradient(90deg, rgba(253,247,241,.97) 0%, rgba(253,247,241,.94) 40%, rgba(253,247,241,0) 62%),
                      var(--ceij-banner-arte, none);
    background-color: #FDF7F1;
}
.ceij .ceij-banner--alto .ceij-banner__nota { font-size: var(--ceij-fs-300); line-height: 1.55; }

.ceij .ceij-banner__titulo--coleccion { display: grid; gap: var(--ceij-e-1); }
.ceij .ceij-banner__titulo--coleccion span {
    font-size: var(--ceij-fs-700);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2A4A;
}
.ceij .ceij-banner__titulo--coleccion b {
    font-size: var(--ceij-fs-800);
    font-weight: var(--ceij-fw-negrita);
    color: #007133;                           /* 6,16:1 sobre el claro del arte */
}
.ceij .ceij-banner__regla--verde { background: #006A2A; width: 160px; }
.ceij .ceij-banner__nota p { margin: 0 0 var(--ceij-e-3); }
.ceij .ceij-banner__nota p:last-child { margin-bottom: 0; }

/* --- Encabezado de ediciones ------------------------------------------- */

/* Aire entre las migas y el encabezado: en el diseño son 52px. */
.ceij .ceij-coleccion__ediciones { margin-top: var(--ceij-e-7); }

.ceij .ceij-coleccion__encabezado h2 {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
}
.ceij .ceij-coleccion__encabezado h2 img { width: 28px; height: 28px; }

.ceij .ceij-coleccion__orden {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-2);
    margin: 0;
    padding: var(--ceij-e-2) var(--ceij-e-4);
    border-radius: var(--ceij-r-pildora);
    background: #EDF4FA;
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto);               /* 9,1:1 sobre #EDF4FA */
}
.ceij .ceij-coleccion__orden img { flex: 0 0 auto; width: 18px; height: 18px; }

/* --- Tarjeta de edición ------------------------------------------------- */

/* Las tarjetas reparten todo el ancho: con `auto-fill` quedaba una pista vacía
   al final y la fila no llegaba al borde.
   El mínimo es 160px, no 220, para que en el teléfono quepan dos por fila —el
   Figma las pone en 165 de los 340 útiles— y en tableta cuatro, de 180. */
.ceij .ceij-coleccion__lista { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* La caja de la portada es apaisada —302x191 medidos en el diseño— aunque los
   archivos vengan en vertical (1080x1350): el diseño recorta la portada. */
.ceij .ceij-edicion__portada {
    position: relative;
    aspect-ratio: 302 / 191;
    margin-bottom: var(--ceij-e-4);
    border-radius: var(--ceij-r-chico);
    overflow: hidden;
    background: var(--ceij-c-superficie-alt);
}
/* El recuadro es apaisado y las portadas son verticales: se encuadra por arriba,
   que es donde va el titulo de la revista, igual que en el Figma. */
.ceij .ceij-edicion__portada img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Cuando la edición no trae portada se dibuja una con su título. */
/* El texto de la portada dibujada va abajo, para no quedar bajo la marca
   «Más reciente». */
.ceij .ceij-edicion__sinportada {
    display: grid;
    align-content: end;
    width: 100%;
    height: 100%;
    padding: var(--ceij-e-4);
    background: linear-gradient(160deg, #0B3E79 0%, #072B61 100%);
    font-family: var(--ceij-f-titulo);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ceij-c-texto-inverso);
}

.ceij .ceij-edicion__marca {
    position: absolute;
    top: var(--ceij-e-2);
    right: var(--ceij-e-2);
}

.ceij .ceij-edicion__anio {
    margin: 0 0 var(--ceij-e-2);
    font-size: var(--ceij-fs-600);
    font-weight: var(--ceij-fw-negrita);
    color: #006826;                           /* 6,98:1 sobre blanco */
}

/* --- Sobre esta colección ----------------------------------------------- */

.ceij .ceij-coleccion__sobre {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: start;
    background: #E4F1EB;
    border-radius: 12px;
    padding: var(--ceij-e-5) var(--ceij-e-6);
}
.ceij .ceij-coleccion__sobre img { width: 40px; height: 40px; }
.ceij .ceij-coleccion__sobre h2 {
    margin: 0 0 var(--ceij-e-2);
    font-size: var(--ceij-fs-500);
    color: #006A2A;                           /* 5,84:1 sobre #E4F1EB */
}
.ceij .ceij-coleccion__sobre-texto { font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto); }
.ceij .ceij-coleccion__sobre-texto p { margin: 0 0 var(--ceij-e-2); }
.ceij .ceij-coleccion__sobre-texto p:last-child { margin-bottom: 0; }

/* Estas reglas van DESPUÉS de la tarjeta de edición, no en el bloque de media
   queries de más arriba: comparten especificidad con las reglas base y, en una
   hoja donde el orden decide, allí perdían. */
@media (max-width: 991.98px) {
    /* La portada pasa a vertical: en escritorio el diseño la recorta apaisada
       (302x191), pero en tableta y teléfono la deja de pie —158x190 y
       143x190—, que es la proporción del archivo original. */
    .ceij .ceij-edicion__portada { aspect-ratio: 3 / 4; }
    .ceij .ceij-edicion { padding: var(--ceij-e-3); gap: var(--ceij-e-2); }
    .ceij .ceij-edicion__sinportada { padding: var(--ceij-e-2); font-size: var(--ceij-fs-meta); }
    .ceij .ceij-edicion__anio   { font-size: var(--ceij-fs-500); }
    .ceij .ceij-edicion__titulo { font-size: var(--ceij-fs-300); }
    .ceij .ceij-edicion__acciones .ceij-btn {
        padding-inline: var(--ceij-e-2);
        font-size: var(--ceij-fs-300);
    }
}

@media (max-width: 575.98px) {
    .ceij .ceij-coleccion__sobre { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Boletines Jurisprudenciales CEIJ
   ---------------------------------------------------------------------
   El banner va en dos capas porque el diseñador entregó el fondo de ondas
   (800x273) y las portadas (1080x1080) por separado: no hay un archivo
   único de 1440x361 como en las demás pantallas.
   ===================================================================== */

.ceij .ceij-boletines-pagina {
    max-width: calc(1444px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding: var(--ceij-e-4) var(--ceij-e-5) var(--ceij-e-8);
}

/* El banner de Boletines usa desde 2026-10 un solo arte por tamaño (las
   portadas ya vienen en la imagen), declarado en boletines.php como en las
   demás internas. Solo se fija el fondo blanco del arte. */
.ceij .ceij-banner--boletines .ceij-banner__lienzo { background-color: #FFFFFF; }

/* Rótulos de sección con icono. */
.ceij .ceij-rotulo-icono {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    margin: var(--ceij-e-7) 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-600);
    color: #072B61;
}
.ceij .ceij-rotulo-icono img { flex: 0 0 auto; width: 26px; height: 26px; }

/* --- Último boletín + aviso ------------------------------------------- */
.ceij .ceij-bol-destacado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: var(--ceij-e-5);
    align-items: start;
}
.ceij .ceij-ultimo--boletines { margin: 0; }

.ceij .ceij-bol-aviso {
    background: #FAF3E9;
    border-radius: 12px;
    padding: var(--ceij-e-5) var(--ceij-e-6);
}
.ceij .ceij-bol-aviso__titulo {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-2);
    margin: 0 0 var(--ceij-e-3);
    font-size: var(--ceij-fs-500);
    color: #072B61;                           /* 12,48:1 sobre el crema */
}
.ceij .ceij-bol-aviso__titulo img { flex: 0 0 auto; width: 24px; height: 24px; }
.ceij .ceij-bol-aviso__texto {
    margin: 0;
    font-size: var(--ceij-fs-300);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
    text-align: center;
}

/* Las fichas de año de esta pantalla van centradas. */
.ceij .ceij-anios--centrado { justify-content: center; }

/* --- Qué encontrará en cada boletín ------------------------------------ */
.ceij .ceij-bol-contenido {
    margin-top: var(--ceij-e-7);
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-left: 5px solid #007D3A;
    border-radius: 12px;
    padding: var(--ceij-e-6);
}
.ceij .ceij-bol-contenido__titulo {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    margin: 0 0 var(--ceij-e-4);
    font-size: var(--ceij-fs-500);
    color: #072B61;
}
.ceij .ceij-bol-contenido__titulo img { flex: 0 0 auto; width: 34px; height: 34px; }
.ceij .ceij-bol-contenido__texto {
    margin: 0 0 var(--ceij-e-5);
    font-size: var(--ceij-fs-400);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
}

.ceij .ceij-bol-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ceij-e-3); }
.ceij .ceij-bol-chips li {
    display: inline-flex;
    align-items: center;
    gap: var(--ceij-e-2);
    padding: var(--ceij-e-2) var(--ceij-e-4);
    border-radius: var(--ceij-r-pildora);
    background: #F3F7FA;
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-fuerte);
    color: #0A2540;                           /* 14,42:1 */
}
.ceij .ceij-bol-chips img { flex: 0 0 auto; width: 20px; height: 20px; }

@media (max-width: 991.98px) {
    .ceij .ceij-bol-destacado { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .ceij .ceij-boletines-pagina { padding-inline: var(--ceij-e-4); }
}

/* =====================================================================
   Capacitaciones Nexus.PJ
   ===================================================================== */

.ceij .ceij-capacitaciones {
    max-width: calc(1444px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding: var(--ceij-e-4) var(--ceij-e-5) var(--ceij-e-8);
}

.ceij .ceij-cap-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ceij-e-4);
    margin: var(--ceij-e-7) 0 var(--ceij-e-5);
}
.ceij .ceij-cap-cabecera__rotulo { display: flex; align-items: center; gap: var(--ceij-e-3); }
.ceij .ceij-cap-cabecera__icono {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #EDF4FA;
}
.ceij .ceij-cap-cabecera h2 { margin: 0; font-size: var(--ceij-fs-600); color: #0A2540; }
.ceij .ceij-cap-cabecera p  { margin: 0; font-size: var(--ceij-fs-300); color: var(--ceij-c-texto-suave); }

/* --- Tarjeta de capacitación -------------------------------------------- */
.ceij .ceij-cap-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ceij-e-5);
}
.ceij .ceij-cap-tarjeta {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-4);
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    padding: var(--ceij-e-5);
}
.ceij .ceij-cap-tarjeta__cabecera { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--ceij-e-4); align-items: start; }

.ceij .ceij-cap-fecha {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 0;
    padding: var(--ceij-e-2);
    border-radius: var(--ceij-r-medio);
    background: #E5EBF1;
    color: #072B61;                          /* 11,45:1 */
    line-height: 1;
}
.ceij .ceij-cap-fecha__mes  { font-size: var(--ceij-fs-meta); font-weight: var(--ceij-fw-negrita); letter-spacing: .06em; }
.ceij .ceij-cap-fecha__dia  { font-size: var(--ceij-fs-600); font-weight: var(--ceij-fw-negrita); }
.ceij .ceij-cap-fecha__anio { font-size: var(--ceij-fs-meta); color: var(--ceij-c-texto-suave); }

.ceij .ceij-cap-tarjeta__titulo { margin: 0; font-size: var(--ceij-fs-500); font-weight: var(--ceij-fw-negrita); color: #0A2540; }

.ceij .ceij-cap-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ceij-e-2); }
.ceij .ceij-cap-datos li {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-3);
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto);
}
.ceij .ceij-cap-datos img { flex: 0 0 auto; width: 18px; height: 18px; }

.ceij .ceij-cap-tarjeta__texto { margin: 0; font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto-suave); }
.ceij .ceij-cap-tarjeta__accion { margin: auto 0 0; }
.ceij .ceij-cap-tarjeta__accion .ceij-btn { width: 100%; border-radius: var(--ceij-r-medio); background-color: #003885; }

.ceij .ceij-cap-vacio {
    margin: 0;
    background: var(--ceij-c-superficie-alt);
    border-radius: 12px;
    padding: var(--ceij-e-6);
    text-align: center;
    color: var(--ceij-c-texto-suave);
}

.ceij .ceij-cap-nota {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: center;
    margin: var(--ceij-e-6) 0 0;
    background: #D9F2F7;
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-4) var(--ceij-e-5);
    font-size: var(--ceij-fs-300);
    color: #0A2540;                          /* 13,31:1 */
}

/* --- Videoteca ------------------------------------------------------------ */
.ceij .ceij-videoteca {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ceij-e-5);
}
.ceij .ceij-video {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-2);
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 12px;
    overflow: hidden;
}
.ceij .ceij-video__enlace { display: block; text-decoration: none; color: inherit; }
.ceij .ceij-video__miniatura {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #0A2540;
    overflow: hidden;
}
.ceij .ceij-video__miniatura img { width: 100%; height: 100%; object-fit: cover; }
/* Velo azul sobre la captura: el diseño las oscurece mucho para que el rótulo
   blanco se lea. Medido sobre el PNG, una zona clara de la captura queda en
   #315A76, que es blanco al 22 % sobre el azul. */
.ceij .ceij-video__miniatura::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,37,64,.72) 0%, rgba(10,37,64,.78) 55%, rgba(10,37,64,.92) 100%);
}
.ceij .ceij-video__marca {
    position: absolute;
    top: var(--ceij-e-2); left: var(--ceij-e-2);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .04em;
    color: var(--ceij-c-acento-hover);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.ceij .ceij-video__rotulo {
    position: absolute;
    left: var(--ceij-e-3); right: 70px; bottom: var(--ceij-e-2);
    font-size: var(--ceij-fs-300);
    font-weight: var(--ceij-fw-negrita);
    color: var(--ceij-c-texto-inverso);
    text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
.ceij .ceij-video__duracion {
    position: absolute;
    right: var(--ceij-e-2); bottom: var(--ceij-e-2);
    padding: 2px var(--ceij-e-2);
    border-radius: var(--ceij-r-chico);
    background: rgba(10,37,64,.85);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-fuerte);
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-video__titulo {
    display: block;
    padding: var(--ceij-e-4) var(--ceij-e-4) 0;
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;
}
.ceij .ceij-video__enlace:hover .ceij-video__titulo { text-decoration: underline; }
.ceij .ceij-video__dato {
    display: flex;
    align-items: center;
    gap: var(--ceij-e-2);
    margin: 0;
    padding-inline: var(--ceij-e-4);
    font-size: var(--ceij-fs-300);
    color: var(--ceij-c-texto-suave);
}
.ceij .ceij-video__dato:last-child { padding-bottom: var(--ceij-e-4); }

/* --- Importante ----------------------------------------------------------- */
.ceij .ceij-cap-importante {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: var(--ceij-e-5);
    align-items: center;
    margin-top: var(--ceij-e-7);
    background: #FFF8E7;
    border-radius: 12px;
    padding: var(--ceij-e-5) var(--ceij-e-6);
}
.ceij .ceij-cap-importante img { width: 34px; height: 34px; }
.ceij .ceij-cap-importante__titulo { margin: 0 0 var(--ceij-e-1); font-size: var(--ceij-fs-400); color: #8A5200; }  /* 6,03:1 */
.ceij .ceij-cap-importante__texto  { margin: 0; font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto); }
.ceij .ceij-cap-importante__accion { margin: 0; }

/* Los botones de contorno de esta pantalla son rectángulos de esquina suave,
   no píldoras —8px de radio sobre 68 de alto—, con fondo blanco y un filete
   claro de 1px (#E8EFF6), no el contorno azul de 2px del sistema. */
.ceij .ceij-capacitaciones .ceij-btn--contorno {
    border-radius: var(--ceij-r-medio);
    background-color: var(--ceij-c-superficie);
    box-shadow: inset 0 0 0 1px #E8EFF6;
    color: #004174;                          /* 8,6:1 sobre blanco */
}
.ceij .ceij-capacitaciones .ceij-btn--contorno:hover,
.ceij .ceij-capacitaciones .ceij-btn--contorno:focus-visible {
    background-color: #F4F8FB;
    box-shadow: inset 0 0 0 1px var(--ceij-c-borde);
    color: #004174;
}

@media (max-width: 1199.98px) {
    .ceij .ceij-videoteca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .ceij .ceij-cap-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ceij .ceij-cap-importante { grid-template-columns: 34px minmax(0, 1fr); }
    .ceij .ceij-cap-importante__accion { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .ceij .ceij-capacitaciones { padding-inline: var(--ceij-e-4); }
    .ceij .ceij-cap-lista,
    .ceij .ceij-videoteca { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Informes de Labores y Rendición de Cuentas
   ===================================================================== */

.ceij .ceij-informes {
    max-width: calc(1444px + var(--ceij-e-5) * 2);
    margin-inline: auto;
    padding: var(--ceij-e-4) var(--ceij-e-5) var(--ceij-e-8);
}

/* Fichas de año sin galón: aquí filtran una lista, no despliegan nada. */
.ceij .ceij-informes .ceij-anios { margin-top: var(--ceij-e-6); }
.ceij .ceij-anio-chip--liso { border-radius: var(--ceij-r-pildora); }

.ceij .ceij-informes__lista {
    list-style: none;
    margin: var(--ceij-e-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ceij-e-6);
    align-items: start;
}

.ceij .ceij-informe {
    display: flex;
    flex-direction: column;
    background: var(--ceij-c-superficie);
    border: 1px solid #E4EBF2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ceij-sombra);
}

.ceij .ceij-informe__cabecera {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-2);
    min-height: 200px;
    padding: var(--ceij-e-5);
    /* Azul institucional con un realce suave arriba a la derecha, como el arte
       del diseño. */
    background:
        radial-gradient(120% 90% at 85% 15%, rgba(80,160,220,.30) 0%, rgba(80,160,220,0) 60%),
        linear-gradient(140deg, #002454 0%, #00336F 55%, #002A5E 100%);
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-informe__distintivo {
    align-self: flex-start;
    margin: 0;
    padding: var(--ceij-e-1) var(--ceij-e-4);
    border-radius: var(--ceij-r-pildora);
    background: rgba(255,255,255,.16);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ceij .ceij-informe__titulo {
    margin: auto 0 0;
    font-size: var(--ceij-fs-600);
    color: var(--ceij-c-texto-inverso);       /* 14,1:1 sobre #00336F */
}
.ceij .ceij-informe__autor { margin: 0; font-size: var(--ceij-fs-300); color: #D7E4F2; }  /* 9,4:1 */

.ceij .ceij-informe__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-4);
    flex: 1 1 auto;
    padding: var(--ceij-e-5);
}
.ceij .ceij-informe__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ceij-e-3);
    margin: 0;
}
.ceij .ceij-informe__formato {
    padding: 3px var(--ceij-e-3);
    border-radius: var(--ceij-r-chico);
    background: #F3F4F6;
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
    color: #0A2540;                           /* 14,4:1 */
}
.ceij .ceij-informe__datos { font-size: var(--ceij-fs-300); color: var(--ceij-c-texto-suave); }
.ceij .ceij-informe__texto { margin: 0; font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto); }
.ceij .ceij-informe__accion { margin: auto 0 0; }

.ceij .ceij-btn-descarga {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ceij-e-3);
    width: 100%;
    min-height: var(--ceij-tactil-min);
    padding: var(--ceij-e-3) var(--ceij-e-4);
    border-radius: var(--ceij-r-medio);
    background: #E5ECF1;
    color: #0A2540;                           /* 11,9:1 */
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-fuerte);
    text-decoration: none;
}
.ceij .ceij-btn-descarga:hover { background: #D7E1E9; color: #0A2540; }
.ceij .ceij-btn-descarga img { flex: 0 0 auto; width: 20px; height: 20px; }
/* Informe sin archivo todavía (p. ej. el del año en curso): mismo lugar que el
   botón, sin enlace ni efecto al pasar el ratón. */
.ceij .ceij-btn-descarga--pendiente,
.ceij .ceij-btn-descarga--pendiente:hover { background: #EEF2F6; color: #475569; cursor: default; }   /* 6,9:1 */

.ceij .ceij-transparencia {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--ceij-e-4);
    align-items: start;
    margin-top: var(--ceij-e-7);
    background: #F3F5F8;
    border-left: 5px solid var(--ceij-c-marca);
    border-radius: var(--ceij-r-medio);
    padding: var(--ceij-e-5) var(--ceij-e-6);
}
.ceij .ceij-transparencia img { width: 26px; height: 26px; }
.ceij .ceij-transparencia__titulo { margin: 0 0 var(--ceij-e-1); font-size: var(--ceij-fs-400); color: #072B61; }
.ceij .ceij-transparencia__texto  { margin: 0; font-size: var(--ceij-fs-300); line-height: var(--ceij-lh-normal); color: var(--ceij-c-texto); }

/* Las tres columnas aguantan en tableta: en «Frame 122» (800) las fichas miden
   207px de los 686 utiles, tres por fila. Solo bajan a dos por debajo de 768.
   Con la ficha estrecha, «Descargar documento» se partia en dos lineas; en el
   Figma va en una, a 12px. */
@media (max-width: 991.98px) {
    .ceij .ceij-informe__cuerpo { padding: var(--ceij-e-4); }
    .ceij .ceij-informe .ceij-btn {
        padding-inline: var(--ceij-e-3);
        font-size: var(--ceij-fs-300);
        gap: var(--ceij-e-2);
    }
}
@media (max-width: 767.98px) {
    .ceij .ceij-informes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ceij-e-4); }
}
@media (max-width: 575.98px) {
    .ceij .ceij-informes { padding-inline: var(--ceij-e-4); }
    .ceij .ceij-informes__lista { grid-template-columns: minmax(0, 1fr); }
    .ceij .ceij-transparencia { grid-template-columns: minmax(0, 1fr); }
}