/* ==========================================================================
   Convocatum — la lista de convocatorias del perfil, en tabla.

   Sigue la referencia que entregó el cliente: encabezado en su azul con los
   rótulos en versalitas, filas separadas por regla fina, el estatus y el tipo
   como pastillas, el nombre en negrita y el enlace en azul al final.

   Ya fue tabla una vez y se cambió a fichas, porque muchas convocatorias
   llegan sin fechas ni ubicación y la pantalla se llenaba de rayas. La
   diferencia ahora está en la celda vacía: dice «Sin fecha» en gris, como en
   su referencia, y eso se lee como un dato que no existe en vez de como algo
   a medio cargar.

   Bajo 60rem la tabla deja de ser tabla: cada fila se dibuja como ficha con
   el rótulo de su columna delante del dato, sacado de `data-rotulo`. No hay
   scroll horizontal en ningún ancho, y no hay una segunda copia del listado
   en el HTML.

   Los colores y las medidas salen de convocatum.css. Aquí no se declara ni
   un valor de color a mano.
   ========================================================================== */

.convocatum-lista {
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Los filtros, a la vista.

   El cliente pidió poder filtrar, así que esconderlos tras un botón sería
   devolverle el problema. Son tres y caben en una línea; cuando no caben,
   bajan solos.
   -------------------------------------------------------------------------- */

.convocatum-lista-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.convocatum-lista-filtro {
    flex: 1 1 12rem;
    min-width: 0;
}

.convocatum-lista-filtro label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cvp-tinta-suave);
}

/* Cuántas se están viendo de cuántas hay. Sin esto, filtrar y que la lista se
   acorte deja la duda de si se escondió algo o si de verdad no hay más */
.convocatum-lista-cuenta {
    flex: 0 0 auto;
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    color: var(--cvp-tinta-suave);
}

/* --------------------------------------------------------------------------
   La tabla.
   -------------------------------------------------------------------------- */

.convocatum-lista-marco {
    border: 1px solid var(--cvp-regla);
    border-radius: var(--cvp-radio);
    background: var(--cvp-papel);
}

.convocatum-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    line-height: 1.45;
}

.convocatum-tabla-titulo {
    padding: 1rem 1.1rem 0.85rem;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cvp-tinta);
}

.convocatum-tabla-antetitulo {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cvp-tinta-suave);
}

.convocatum-tabla thead th {
    padding: 0.7rem 0.6rem;
    background: var(--cvp-tinta);
    color: var(--cvp-papel);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: middle;
}

.convocatum-tabla tbody td {
    padding: 0.85rem 0.6rem;
    border-bottom: 1px solid var(--cvp-regla);
    vertical-align: top;
}

.convocatum-tabla tbody tr:last-child td {
    border-bottom: 0;
}

/* La fila entera se apaga cuando la convocatoria cerró, igual que hacía la
   ficha: sigue ahí para quien la vio abierta y vuelve, pero deja de competir */
.convocatum-tabla tbody tr[data-estatus="cerrada"] {
    color: var(--cvp-tinta-suave);
}

.convocatum-tabla .es-num {
    width: 3rem;
    font-weight: 700;
    text-align: center;
}

.convocatum-tabla .es-afinidad {
    white-space: nowrap;
    font-weight: 700;
}

.convocatum-tabla .es-afinidad small {
    font-size: 0.75em;
}

.convocatum-tabla .es-nombre {
    min-width: 12rem;
    font-weight: 700;
    color: var(--cvp-tinta);
}

/* Por qué se le propuso. Va debajo del nombre y en menor peso: es lo que la
   persona lee cuando duda, no la columna que escanea */
.convocatum-porque-corto {
    display: block;
    margin-top: 0.3rem;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--cvp-tinta-suave);
}

.convocatum-tabla a {
    font-weight: 700;
    color: var(--cvp-tinta);
}

/* El dato que la convocatoria no trae. Dicho, no dibujado con una raya: una
   raya se lee como un error de carga y esto es una ausencia real */
.convocatum-sin-dato {
    color: var(--cvp-tinta-suave);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Las pastillas de estatus y de tipo, como en su referencia.
   -------------------------------------------------------------------------- */

.convocatum-pastilla {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
    background: var(--cvp-papel-alt);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* El verde y el rojo van en la tinta de texto sobre un fondo muy claro del
   mismo tono: el verde de marca sobre papel blanco da 1.88:1 y no se lee */
.convocatum-pastilla.es-abierta {
    color: var(--cvp-exito);
    box-shadow: inset 0 0 0 1px currentColor;
}

.convocatum-pastilla.es-cerrada {
    color: var(--cvp-error);
    box-shadow: inset 0 0 0 1px currentColor;
}

.convocatum-pastilla.es-tipo {
    color: var(--cvp-tinta-suave);
}

/* --------------------------------------------------------------------------
   Vacío por filtro. No es lo mismo que «todavía no te ha tocado nada»: aquí
   sí hay convocatorias y los filtros las escondieron, así que lo que se
   ofrece es quitarlos.
   -------------------------------------------------------------------------- */

.convocatum-lista-sin-resultados {
    margin: 0;
    padding: 1.5rem 1.1rem;
    text-align: center;
    color: var(--cvp-tinta-suave);
}

.convocatum-enlace-boton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cvp-tinta);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Celular: la fila se vuelve ficha.

   Once columnas no caben en 375px y el scroll horizontal en una lista que se
   lee con el pulgar es una trampa: la mitad de las columnas no se descubren
   nunca. Cada celda pasa a una línea con su rótulo delante, sacado del
   atributo `data-rotulo` de la propia celda, así que el encabezado y las
   etiquetas no se pueden separar.
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
    .convocatum-lista-marco {
        border: 0;
        background: none;
    }

    .convocatum-tabla,
    .convocatum-tabla tbody,
    .convocatum-tabla tr,
    .convocatum-tabla td {
        display: block;
        width: auto;
    }

    /* El encabezado se va, pero sigue estando para quien navega con lector de
       pantalla: `clip` lo saca de la vista sin sacarlo del árbol */
    .convocatum-tabla thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .convocatum-tabla-titulo {
        padding: 0 0 0.85rem;
    }

    .convocatum-tabla tbody tr {
        margin-bottom: 1rem;
        padding: 1rem 1.1rem;
        border: 1px solid var(--cvp-regla);
        border-left: 3px solid var(--cvp-tinta);
        border-radius: var(--cvp-radio);
        background: var(--cvp-papel);
    }

    .convocatum-tabla tbody tr[data-estatus="cerrada"] {
        border-left-color: var(--cvp-regla);
        background: var(--cvp-papel-alt);
    }

    .convocatum-tabla tbody td {
        display: flex;
        gap: 0.75rem;
        padding: 0.3rem 0;
        border-bottom: 0;
    }

    .convocatum-tabla tbody td::before {
        content: attr(data-rotulo);
        flex: 0 0 8.5rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--cvp-tinta-suave);
    }

    /* El nombre manda en la ficha, así que se sube al principio y prescinde
       de su rótulo: nadie necesita que le digan que eso es el nombre */
    .convocatum-tabla tbody td.es-nombre {
        display: block;
        order: -1;
        margin-bottom: 0.4rem;
        font-size: 1rem;
    }

    .convocatum-tabla tbody td.es-nombre::before {
        content: none;
    }

    /* El número de fila no aporta nada cuando ya no hay tabla que recorrer */
    .convocatum-tabla tbody td.es-num {
        display: none;
    }

    /* El enlace se separa del bloque de datos y se toca con el pulgar */
    .convocatum-tabla tbody td[data-rotulo="Link"] {
        display: block;
        margin-top: 0.6rem;
    }

    .convocatum-tabla tbody td[data-rotulo="Link"]::before {
        content: none;
    }

    .convocatum-tabla tbody td[data-rotulo="Link"] a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }
}