/* =========================================================
   EDU — VISTAS DE NAVEGACIÓN
   Índice, nodo y asignatura, más las migas dentro de fichas.

   Se agrega al final de tu hoja actual (Apariencia > Personalizar >
   CSS adicional), después de la sección 21.

   Reutiliza el lenguaje visual de la portada: azul #1769aa,
   tarjetas de 15-17px de radio, kickers en mayúsculas.
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.edu-page,
.edu-breadcrumbs {
    --edu-text: #18202a;
    --edu-text-soft: #344054;
    --edu-muted: #667085;
    --edu-light: #f7f9fb;
    --edu-line: #e4e9ef;
    --edu-blue: #1769aa;
    --edu-blue-dark: #105487;
    --edu-blue-soft: #edf6fc;
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.edu-page {
    width: 100%;
    max-width: 1080px;

    margin: 0 auto !important;
    padding: 26px 24px 60px;

    color: var(--edu-text);
}


/* =========================================================
   MIGAS DE PAN
   Aplican tanto en las vistas como dentro de cada ficha
   ========================================================= */

.edu-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin-bottom: 22px;

    color: #98a2b3;

    font-size: 13px;
    line-height: 1.5;
}

.edu-breadcrumbs a {
    color: var(--edu-muted);
    text-decoration: none;
}

.edu-breadcrumbs a:hover {
    color: var(--edu-blue-dark);
    text-decoration: underline;
}

.edu-breadcrumbs [aria-current="page"] {
    color: #29313d;
    font-weight: 600;
}

/* Enlace de inicio con icono */
.edu-crumb-home {
    display: inline-flex;
    align-items: center;

    gap: 5px;
}

.edu-crumb-icon {
    width: 14px;
    height: 14px;

    margin-top: -1px;

    fill: currentColor;
    opacity: 0.75;
}

.edu-crumb-home:hover .edu-crumb-icon {
    opacity: 1;
}

/* En las vistas propias, algo más de aire bajo las migas */
.edu-page .edu-breadcrumbs {
    margin-bottom: 22px;
}

/* Dentro de una entrada: arriba del título, alineado al ancho de lectura.
   El ritmo replica el de las vistas: migas → kicker → título. */
.single-post .edu-breadcrumbs--ficha {
    width: 100%;
    max-width: 850px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 14px;
    margin-bottom: 20px;

    font-size: 13px;
}

/* Kicker de la ficha: etiqueta de tipo */
.single-post .edu-kicker--ficha {
    display: flex;
    align-items: center;

    gap: 6px;

    width: 100%;
    max-width: 850px;

    margin: 0 auto 10px;

    color: var(--edu-blue);

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    text-decoration: none !important;
}

/* El título arranca justo después del kicker */
.single-post .entry-header {
    margin-top: 0;
}


/* =========================================================
   ENCABEZADO DE PÁGINA
   ========================================================= */

.edu-page-header {
    margin-bottom: 38px;
    padding-bottom: 26px;

    border-bottom: 1px solid var(--edu-line);
}

.edu-kicker {
    display: inline-block;

    margin-bottom: 9px;

    color: var(--edu-blue);

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.edu-page-header h1 {
    max-width: none;

    margin: 0 0 12px !important;

    color: #171c24;

    font-size: 38px !important;
    line-height: 1.13 !important;
    font-weight: 700 !important;

    letter-spacing: -0.03em;
}

.edu-page .edu-lead {
    max-width: none;

    margin: 0 0 10px;

    color: var(--edu-text-soft);

    font-size: 16px;
    line-height: 1.65;
}

.edu-page .edu-lead p:last-child {
    margin-bottom: 0;
}

.edu-meta {
    margin: 0 !important;

    color: var(--edu-muted);

    font-size: 13px;
    line-height: 1.5;
}



/* =========================================================
   ICONOS
   ========================================================= */

.edu-icon {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    fill: currentColor;
}

.edu-kicker {
    display: inline-flex;
    align-items: center;

    gap: 6px;
}

.edu-kicker-icon {
    width: 14px;
    height: 14px;
}

.edu-block-title {
    display: flex;
    align-items: center;

    gap: 9px;
}

.edu-block-icon {
    width: 19px;
    height: 19px;

    color: var(--edu-blue);
}

.edu-block--soft .edu-block-icon {
    width: 16px;
    height: 16px;
}

.edu-node-head {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    min-width: 0;
}

.edu-node-icon {
    width: 17px;
    height: 17px;

    margin-top: 2px;

    color: #9fb4c7;

    transition: color 0.18s ease;
}

.edu-node-card:hover .edu-node-icon {
    color: var(--edu-blue);
}


/* =========================================================
   BLOQUES
   ========================================================= */

.edu-block {
    margin-bottom: 46px;
}

.edu-block--soft {
    margin-top: 50px;
    padding: 26px 28px;

    border-radius: 18px;

    background: var(--edu-light);
}

.edu-block-title {
    margin: 0 0 18px !important;

    color: #171c24;

    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    letter-spacing: -0.02em;
}

.edu-block--soft .edu-block-title {
    font-size: 15px !important;
    font-weight: 700 !important;

    color: var(--edu-text-soft);
}


/* =========================================================
   NOTA ORIENTADORA
   Texto breve que acompaña a cada bloque
   ========================================================= */

.edu-nota {
    max-width: none;

    margin: -6px 0 18px !important;

    color: var(--edu-muted);

    font-size: 14px;
    line-height: 1.6;
}

.edu-nota--suelta {
    margin: -18px 0 24px !important;
}


/* =========================================================
   TARJETAS DE NODO Y ASIGNATURA
   ========================================================= */

.edu-node-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(min(100%, 260px), 1fr)
        );

    gap: 13px;
}

.edu-node-card {
    display: flex;
    flex-direction: column;

    justify-content: space-between;

    gap: 12px;

    min-height: 96px;
    min-width: 0;

    padding: 18px 19px;

    border: 1px solid var(--edu-line);
    border-radius: 15px;

    background: #ffffff;
    color: inherit;

    text-decoration: none !important;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.edu-node-card:hover {
    transform: translateY(-2px);

    border-color: #cbd8e3;
    background: #fbfdff;

    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
}

.edu-node-name {
    color: #29313d;

    font-size: 15px;
    line-height: 1.38;
    font-weight: 700;
}

.edu-node-card:hover .edu-node-name {
    color: var(--edu-blue-dark);
}

.edu-node-meta {
    color: var(--edu-muted);

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   LISTA DE FICHAS
   ========================================================= */

.edu-ficha-list {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    border-top: 1px solid var(--edu-line);
}

.edu-ficha-list li {
    margin: 0 !important;

    border-bottom: 1px solid var(--edu-line);
}

.edu-ficha-list a {
    display: block;

    padding: 13px 4px;

    color: var(--edu-text-soft);

    font-size: 16px;
    line-height: 1.5;

    text-decoration: none !important;

    transition:
        color 0.15s ease,
        padding-left 0.15s ease;
}

.edu-ficha-list a:hover {
    padding-left: 10px;

    color: var(--edu-blue-dark);
}

/* Variante numerada, para asignaturas con secuencia de lecciones.
   Se usa un contador propio: al quitar el marcador nativo con
   list-style:none, counter(list-item) deja de incrementarse. */
.edu-ficha-list--numbered {
    padding-left: 0 !important;

    list-style: none !important;

    counter-reset: edu-num var(--edu-start, 0);
}

.edu-ficha-list--numbered li {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);
    align-items: baseline;

    counter-increment: edu-num;
}

.edu-ficha-list--numbered li::before {
    content: counter(edu-num);

    padding-top: 13px;

    color: #a4adba;

    font-size: 13px;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   FICHAS RELACIONADAS / CHIPS
   ========================================================= */

.edu-chip-row {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.edu-chip {
    display: inline-block;

    padding: 8px 13px;

    border: 1px solid #d9e3ec;
    border-radius: 999px;

    background: #ffffff;
    color: var(--edu-text-soft);

    font-size: 13px;
    line-height: 1.3;

    text-decoration: none !important;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}

.edu-chip:hover {
    border-color: #8ebbdc;

    background: var(--edu-blue-soft);
    color: var(--edu-blue-dark);
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.edu-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid var(--edu-line);
}

.edu-pager-status {
    order: 2;

    flex: 1 1 auto;

    color: var(--edu-muted);

    font-size: 13px;
    text-align: center;
}

.edu-pager-link {
    order: 1;

    flex: 0 0 auto;

    padding: 9px 15px;

    border: 1px solid #d5dde6;
    border-radius: 10px;

    background: #ffffff;
    color: var(--edu-blue-dark);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.edu-pager-link[rel="next"] {
    order: 3;
}

.edu-pager-link:hover {
    border-color: #8ebbdc;
    background: var(--edu-blue-soft);
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.edu-vacio {
    padding: 40px 24px;

    border: 1px solid var(--edu-line);
    border-radius: 18px;

    background: var(--edu-light);

    color: var(--edu-muted);

    text-align: center;
}


/* =========================================================
   TABLETA
   ========================================================= */

@media (max-width: 820px) {

    .edu-page {
        padding: 22px 20px 50px;
    }

    .edu-page-header h1 {
        font-size: 33px !important;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .edu-page {
        padding: 18px 16px 44px;
    }

    .edu-breadcrumbs {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .single-post .edu-breadcrumbs--ficha {
        margin-top: 8px;
        margin-bottom: 16px;
    }

    .single-post .edu-kicker--ficha {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .edu-page-header {
        margin-bottom: 30px;
        padding-bottom: 22px;
    }

    .edu-page-header h1 {
        font-size: 28px !important;
        line-height: 1.16 !important;
    }

    .edu-page .edu-lead {
        font-size: 15px;
    }

    .edu-node-grid {
        grid-template-columns: 1fr;
    }

    .edu-node-card {
        min-height: 0;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 14px;
    }

    .edu-node-meta {
        flex: 0 0 auto;
        text-align: right;
    }

    .edu-block {
        margin-bottom: 38px;
    }

    .edu-block--soft {
        padding: 22px 19px;
    }

    .edu-block-title {
        font-size: 19px !important;
    }

    .edu-ficha-list a {
        padding: 12px 2px;
        font-size: 15px;
    }

    .edu-ficha-list--numbered li {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .edu-pager {
        flex-wrap: wrap;
    }

    .edu-pager-status {
        order: 3;

        flex: 1 0 100%;

        margin-top: 12px;
    }

    .edu-pager-link[rel="next"] {
        order: 2;

        margin-left: auto;
    }

}


/* =========================================================
   AJUSTE A TU HOJA ACTUAL
   Las vistas no son entradas: no deben heredar el ancho
   de lectura de 980px definido para body:not(.home)
   ========================================================= */

body:not(.home) .site-main.edu-page {
    max-width: 1080px;
}


/* =========================================================
   NAVEGACIÓN PRINCIPAL DE GENERATEPRESS
   Se retira de todo el sitio: las migas de pan cumplen
   la función de orientación, y el menú duplicaba el enlace
   a Inicio sin aportar rutas nuevas.
   ========================================================= */

.main-navigation,
#site-navigation,
.gen-sidebar-nav,
nav.main-navigation {
    display: none !important;
}

/* El botón de menú móvil pertenece a la misma navegación */
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items,
.sidebar-nav-mobile {
    display: none !important;
}

/* Sin menú, el encabezado no necesita separación inferior */
.site-header {
    margin-bottom: 0 !important;
}