/* ==========================================================================
   Convocatum — una convocatoria mostrada en el sitio.

   Aquí vive la ficha de una convocatoria publicada, con su cartel.

   Aquí VIVÍA también la lista de las que le tocaron a la persona, cuando esa
   pantalla eran tarjetas. Volvió a ser tabla y su maqueta está en
   convocatum-lista.css, pero la rejilla de aquella etapa se quedó puesta sobre
   `.convocatum-lista`, que es la clase que la tabla siguió usando. Las dos
   hojas cargan en la misma página, así que la rejilla ganaba: los filtros
   quedaban apretados en una columna de 185 px, la nota del pie se metía debajo
   de ellos, y el marco de la tabla se salía 220 px del ancho del perfil,
   porque una columna de grid no encoge por debajo de lo que mide su contenido.
   Se quitó. Si vuelve a hacer falta una rejilla de tarjetas, va con nombre
   propio y no con el de la lista.
   ========================================================================== */

.convocatum-tarjeta {
    padding: 1.25rem;
    border: 1px solid #e0e3e8;
    border-radius: 0.6rem;
    background: #fff;
}

.convocatum-tarjeta h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    line-height: 1.35;
}

.convocatum-meta {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--cvp-tinta-suave);
}

.convocatum-razon {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
}

.convocatum-enlace {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Convocatoria publicada en el sitio.
   Retícula 2/5 + 3/5 tomada de la plantilla que el cliente maqueta hoy a mano
   con el constructor del tema. Los colores son los suyos: #eff2f7 la ficha y
   #23224f los títulos. En móvil se apila, que es lo que hoy depende del tema.
   -------------------------------------------------------------------------- */

/* El shortcode no sabe dónde lo van a pegar: puede caer a ancho completo o dentro de una
   columna estrecha del tema. Por eso se mide contra su propio contenedor y no contra la
   ventana, que es lo que haría un media query. Con el tema de pruebas, cuyo contenido va a
   unos 640px, un media query dejaba las dos columnas y la ficha quedaba ilegible en una
   ventana de escritorio. */
.convocatum-publicacion {
    container-type: inline-size;
}

/* Las mismas proporciones que su sitio, que arma esta pantalla con una rejilla de Avia:
   dos celdas `av_two_fifth` y `av_three_fifth`, ambas con `no_margin`. Sin hueco entre
   ellas y estiradas: allá la columna gris llega hasta abajo, no termina donde se acaba su
   texto. El aire del lado derecho lo pone su propio relleno, no el hueco de la rejilla. */
.convocatum-convocatoria {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0;
    align-items: stretch;
}

.convocatum-cartel {
    padding: 30px 30px 30px 45px;
}

@container (max-width: 720px) {
    .convocatum-convocatoria {
        grid-template-columns: 1fr;
    }

    .convocatum-cartel {
        order: -1;
    }

    .convocatum-datos-panel,
    .convocatum-cartel {
        padding: 1.25rem;
    }
}

/* La columna de datos. No se llama «ficha»: ese nombre lo ocupa la tarjeta de la rejilla,
   más abajo en esta misma hoja, y al compartirlo su fondo y su borde pisaban a este panel */
.convocatum-datos-panel {
    padding: 30px;
    background: var(--cvp-papel-alt);
}

.convocatum-datos-panel-titulo {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cvp-tinta);
}

/* En su sitio el organizador va en verde. Se usa el verde de éxito y no el de la marca:
   el de la marca es muy claro y sobre este fondo gris no alcanza contraste para leerse */
.convocatum-organizador {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: var(--cvp-exito);
}

.convocatum-datos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.convocatum-datos > li {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(35, 34, 79, 0.12);
}

.convocatum-datos > li:first-child {
    border-top: 0;
    padding-top: 0;
}

/* El disco de color con el icono, como los de su lista actual */
.convocatum-icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Del tamaño que tienen en su sitio: son discos, no viñetas, y a 2rem quedaban
       como una lista con bolita en vez de la columna de datos que él enseñó */
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--cvp-tinta);
    color: #fff;
}

.convocatum-dato {
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.convocatum-dato strong {
    display: block;
    color: var(--cvp-tinta);
}

/* Una URL larga no debe ensanchar la columna ni sacar barra horizontal */
.convocatum-dato a {
    overflow-wrap: anywhere;
}

/* El nombre de la convocatoria sobre el documento. Va en gris y con peso normal: encabeza
   sin competir con el documento, que es lo que la persona viene a leer */
.convocatum-emisor {
    margin: 0 0 1.75rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cvp-tinta-suave);
}

.convocatum-imagen {
    display: block;
    width: 100%;
    height: auto;
}

.convocatum-sin-cartel {
    padding: 2rem;
    text-align: center;
    background: #f7f8fa;
}

@media (max-width: 782px) {
    .convocatum-convocatoria {
        grid-template-columns: 1fr;
    }

    /* El cartel primero: en una pantalla angosta es lo que identifica la
       convocatoria de un vistazo, y la ficha se lee después */
    .convocatum-cartel {
        order: -1;
    }

    .convocatum-datos-panel {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   La rejilla de una sección del sitio.

   Reemplaza al listado que el dueño arma hoy con el constructor del tema: tres
   columnas y doce por página, que es como lo tiene. Lo que se añade es el
   estatus y el plazo en la propia tarjeta, porque hoy hay que abrir la
   convocatoria para saber si sigue viva.

   Sin radios ni sombras: la ficha del sitio no los usa y estas tarjetas viven
   en la misma página.
   ========================================================================== */

.convocatum-publicadas-cabecera {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--cvp-tinta);
}

.convocatum-publicadas-cabecera h2 {
    margin: 0;
    color: var(--cvp-tinta);
}

.convocatum-publicadas-cuenta {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--cvp-tinta-suave);
}

.convocatum-rejilla {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
    .convocatum-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 56rem) {
    .convocatum-rejilla.es-columnas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .convocatum-rejilla.es-columnas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .convocatum-rejilla.es-columnas-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* `position: relative` es lo que ancla el enlace estirado de más abajo: sin él,
   el pseudo-elemento se posicionaría contra la página entera en vez de contra
   la tarjeta. */
.convocatum-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cvp-regla);
    background: var(--cvp-papel);
}

/* El cartel de la convocatoria. Se recorta a una proporción fija en vez de
   respetar la del archivo: los carteles llegan de todo (un flyer apaisado, la
   primera página vertical de un PDF), y sin recorte cada tarjeta quedaría de
   una altura distinta y la rejilla se vería como un serrucho. */
.convocatum-ficha-cartel {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--cvp-papel-alt);
}

.convocatum-ficha-imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cubre el recuadro anclado arriba, no al centro. En un cartel horizontal da
       casi igual porque llena el marco y sobra poco. La diferencia está en las
       convocatorias cuyo cartel es la primera página de un PDF: una hoja vertical
       metida en un marco apaisado pierde la mayor parte, y recortando por el
       centro lo que queda es la franja de texto corrido de en medio, ilegible a
       ese tamaño. Anclando arriba queda el membrete y el título, que es lo que
       identifica la convocatoria de un vistazo. */
    object-position: top;
}

/* La convocatoria cerrada se apaga: sigue en el listado los días que diga la
   configuración, pero no debe competir visualmente con las que sí están vivas. */
.convocatum-ficha.es-cerrada .convocatum-ficha-imagen {
    filter: grayscale(1);
    opacity: 0.65;
}

/* El filete de color: verde si está abierta, gris si cerró. Cuando hay cartel
   va encima de la imagen, como un subrayado; cuando no lo hay es lo único que
   ocupa esa franja, y así una tarjeta sin foto no deja un hueco en la rejilla. */
.convocatum-ficha-marca {
    display: block;
    height: 4px;
    background: var(--cvp-exito);
}

.convocatum-ficha-cartel .convocatum-ficha-marca {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

.convocatum-ficha.es-cerrada .convocatum-ficha-marca {
    background: var(--cvp-tinta-suave);
}

/* Toda la tarjeta abre la convocatoria, no solo el renglón de «Ver la
   convocatoria». Se hace estirando el enlace que ya existe con un pseudo-elemento
   transparente que cubre la tarjeta, en vez de envolverlo todo en una etiqueta
   <a>: así el título sigue siendo un encabezado de verdad, un lector de pantalla
   anuncia un solo vínculo con su texto —y no la tarjeta entera de corrido— y el
   texto se puede seguir seleccionando con el ratón. */
.convocatum-ficha-enlace::after {
    content: "";
    position: absolute;
    inset: 0;
}

.convocatum-ficha-cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.1rem 1.2rem;
}

.convocatum-ficha-estatus { margin: 0; }

.convocatum-ficha-titulo {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--cvp-tinta);
}

.convocatum-ficha-meta,
.convocatum-ficha-plazo {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cvp-tinta-suave);
}

.convocatum-ficha-enlace {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-top: auto;
    font-weight: 600;
    color: var(--cvp-tinta);
}

/* La paginación recarga la página y aterriza en un ancla. El margen deja un
   respiro por encima para que el listado no quede pegado al borde de la pantalla,
   y sirve de colchón si el tema lleva cabecera fija.

   Aplica cuando el ancla es la propia rejilla, que es el caso por defecto. Si el
   shortcode recibe el atributo `ancla` el aterrizaje es otro elemento, del tema, y
   el respiro le toca a él: en la portada lo da el relleno de la sección
   «Próximos Eventos», que ya trae entre 40 y 72 píxeles por arriba. */
.convocatum-publicadas {
    scroll-margin-top: 1.5rem;
}

.convocatum-paginas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cvp-regla);
}

.convocatum-paginas a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--cvp-tinta);
}

.convocatum-paginas-cuenta {
    font-size: 0.85rem;
    color: var(--cvp-tinta-suave);
}

/* Los números se envuelven en varios renglones si no caben, que es lo que pasa en un teléfono
   en cuanto hay muchas páginas. Cada uno mide 2.75rem por lado para que se pueda picar con el
   dedo sin acertarle al de junto. */
.convocatum-paginas-numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.convocatum-paginas-numeros a,
.convocatum-paginas-actual,
.convocatum-paginas-brinco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-size: 0.95rem;
}

.convocatum-paginas-actual {
    font-weight: 700;
    color: var(--cvp-tinta);
    border-bottom: 2px solid currentColor;
}

.convocatum-paginas-brinco {
    color: var(--cvp-tinta-suave);
}