/*
 * Listado de carreras agrupado por nivel — shortcode [exa_carreras].
 *
 * Paleta institucional EXA: azul #1e2f4f, turquesa #00a19a.
 * Los colores van en variables para que otra facultad los cambie en un solo
 * lugar, o los redefina desde el tema sin tocar este archivo.
 */

.exa-carreras-nivel {
    --exa-azul: #1e2f4f;
    --exa-turquesa: #00a19a;
    --exa-tinta: #3c4a61;
    --exa-linea: #dfe4ec;
    margin: 0 0 3rem;
}

.exa-carreras-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--exa-turquesa);
    color: var(--exa-azul);
    font-size: 1.6rem;
    line-height: 1.2;
}

.exa-carreras-cuenta {
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--exa-turquesa);
}

/* Grilla fluida: se acomoda sola sin media queries. */
.exa-carreras-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.exa-carrera-item {
    margin: 0;
    padding: 0;
}

.exa-carrera-item > a,
.exa-carrera-item > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--exa-linea);
    border-left: 4px solid var(--exa-turquesa);
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.exa-carrera-item > a:hover,
.exa-carrera-item > a:focus-visible {
    border-color: var(--exa-turquesa);
    box-shadow: 0 3px 14px rgba(30, 47, 79, 0.12);
    transform: translateY(-2px);
}

.exa-carrera-item > a:focus-visible {
    outline: 2px solid var(--exa-turquesa);
    outline-offset: 2px;
}

.exa-carrera-tipo {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--exa-turquesa);
}

.exa-carrera-nombre {
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.28;
    color: var(--exa-azul);
    text-wrap: balance;
}

.exa-carrera-titulo-otorga,
.exa-carrera-dato {
    font-size: 0.85rem;
    color: var(--exa-tinta);
}

.exa-carrera-dato {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.exa-carrera-dato i {
    margin-right: 0.3rem;
    color: var(--exa-turquesa);
}

@media (prefers-reduced-motion: reduce) {
    .exa-carrera-item > a { transition: none; }
    .exa-carrera-item > a:hover { transform: none; }
}

/* Subtítulo de cada tipo dentro de un nivel (Doctorado, Maestría, …).
   El listado ordena por título y eso mezclaba los tipos; agrupados, la persona
   encuentra «los doctorados» de un vistazo en vez de leer los diecinueve. */
.exa-carreras-tipo-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 1.6rem 0 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--exa-azul);
}

/* El primero pega con el título del nivel: sin margen de más. */
.exa-carreras-tipo-titulo:first-of-type {
    margin-top: 0.2rem;
}

.exa-carreras-tipo-titulo .exa-carreras-cuenta {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 161, 154, 0.12);
}

/* Entre un grupo y el subtítulo del siguiente hace falta aire, o los grupos
   se leen como una sola lista larga. */
.exa-carreras-grilla + .exa-carreras-tipo-titulo {
    margin-top: 2rem;
}

/* ── El puntito del tema, y por qué hay que apagarlo acá ──────────────────────
   El tema le pone una viñeta turquesa a TODO `li` dentro de .page-inst-content
   (`.page-inst-content ul li::before`). En esta grilla eso no es decorativo:
   mete una línea de texto adentro de la celda antes de la ficha, y como la
   ficha es `height: 100%`, termina midiendo más que su celda y se DIBUJA
   corrida hacia abajo — 62 px medidos en Posgrado.

   El navegador calcula el layout con la altura de la celda y pinta la ficha más
   abajo: por eso las fichas tapaban el título «Formularios» y los subtítulos de
   cada tipo, aunque midiendo el `ul` y la `section` no se viera ningún desborde.

   Se apaga sólo dentro de la grilla; el resto del contenido conserva sus
   viñetas. El selector repite `.page-inst-content` porque el del tema tiene
   más especificidad que una clase sola y, si no, gana él. */
.page-inst-content .exa-carreras-grilla > li::before,
.exa-carreras-grilla > li::before {
    content: none;
}

.page-inst-content .exa-carreras-grilla > li,
.exa-carreras-grilla > li {
    padding-left: 0;
    list-style: none;
    /* La celda se estira y la ficha la llena. Antes la ficha se estiraba sola
       con `height: 100%`, que en un `list-item` se calcula contra una altura que
       todavía no está resuelta: la ficha terminaba más alta que su celda y el
       sobrante se dibujaba encima de lo que seguía. */
    display: flex;
}

.page-inst-content .exa-carrera-item > a,
.exa-carrera-item > a,
.exa-carrera-item > span:first-child {
    flex: 1;
    height: auto;
}