/* =========================================================
   ÍNDICE GENERAL DE CONTENIDOS
========================================================= */
/* =========================================================
   NAVEGACIÓN GENERAL DEL ÍNDICE
========================================================= */

.navegador-indice {
    margin: 2.3rem 0 3rem;
}


.navegador-indice-titulo {
    margin-bottom: 1rem;

    text-align: center;

    color: #7e5b25;

    font-size: .92rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;
}


.navegador-indice-controles {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: .75rem;
}


/* BOTONES */

.navegador-indice-general,
.navegador-indice-boton {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .45rem;

    min-height: 48px;

    padding: .7rem 1.15rem;

    border: 1px solid rgba(181, 128, 38, .42);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #fbf6e9,
            #f6ecd6
        );

    color: #402b12;

    font-weight: 750;

    text-decoration: none;

    box-shadow:
        0 2px 6px rgba(37, 42, 50, .04);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}


.navegador-indice-boton {
    appearance: none;
    cursor: pointer;
}


.navegador-indice-general:hover,
.navegador-indice-boton:hover,
.navegador-indice-boton[aria-expanded="true"] {
    transform: translateY(-1px);

    background: #fffaf0;

    color: #8f1d11;

    box-shadow:
        0 5px 14px rgba(37, 42, 50, .08);
}


/* DESPLEGABLE */

.navegador-indice-dropdown {
    position: relative;
}


.navegador-indice-menu {
    min-width: 300px;

    padding: .55rem;

    border: 1px solid rgba(181, 128, 38, .25);
    border-radius: 14px;

    background: #fffdf8;

    box-shadow:
        0 12px 30px rgba(30, 38, 48, .12);
}


.navegador-indice-menu .dropdown-item {
    display: flex;
    flex-direction: column;

    gap: .1rem;

    padding: .65rem .8rem;

    border-radius: 9px;

    white-space: normal;

    color: #243348;
}


.navegador-indice-menu .dropdown-item:hover,
.navegador-indice-menu .dropdown-item:focus {
    background: #f6ead0;

    color: #8f1d11;
}


.navegador-periodo-titulo {
    font-weight: 700;
}


.navegador-indice-menu small {
    color: #88755a;

    font-size: .77rem;
}


.navegador-sin-contenido {
    padding: .65rem .8rem;

    color: #8a8a8a;

    font-size: .9rem;
}


/* MÓVIL */

@media (max-width: 767.98px) {

    .navegador-indice-controles {
        display: grid;
        grid-template-columns: 1fr;
    }

    .navegador-indice-general,
    .navegador-indice-boton,
    .navegador-indice-dropdown {
        width: 100%;
    }

    .navegador-indice-menu {
        width: 100%;
    }

}

/* =========================================================
   PERIODO HISTÓRICO
========================================================= */

.indice-periodo {
    margin-top: 3.5rem;
}


.indice-periodo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;

    padding: 1.6rem 1.8rem;

    border: 1px solid rgba(181, 128, 38, 0.30);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(250, 246, 236, 0.98),
            rgba(239, 224, 193, 0.78)
        );

    box-shadow:
        0 8px 24px rgba(38, 44, 55, 0.06);
}


.indice-periodo-fechas {
    display: inline-block;

    margin-bottom: .35rem;

    font-size: .86rem;
    font-weight: 700;

    color: #8a5b17;

    letter-spacing: .04em;
}


.indice-periodo-cabecera h2 {
    margin: 0;

    color: #18283c;

    font-weight: 800;
}


.indice-periodo-cabecera p {
    max-width: 850px;

    margin: .55rem 0 0;

    color: #56616f;
}


.indice-periodo-enlace {
    flex: 0 0 auto;

    padding: .65rem 1rem;

    border: 1px solid rgba(167, 105, 21, .28);
    border-radius: 999px;

    background: rgba(255, 255, 255, .65);

    color: #9d1f12;

    font-weight: 700;
    text-decoration: none;

    transition:
        transform .15s ease,
        background-color .15s ease;
}


.indice-periodo-enlace:hover {
    transform: translateY(-1px);

    background: #fff;

    color: #7d160c;
}


/* =========================================================
   SUBSECCIONES
========================================================= */

.indice-contenidos-seccion {
    margin-top: 1.8rem;
}


.indice-contenidos-cabecera {
    display: flex;
    align-items: center;
    gap: .65rem;

    margin-bottom: 1rem;
}


.indice-contenidos-cabecera span {
    font-size: 1.3rem;
}


.indice-contenidos-cabecera h3 {
    margin: 0;

    color: #1c2b3c;

    font-size: 1.45rem;
    font-weight: 800;
}


/* =========================================================
   LISTA DE CAPÍTULOS
========================================================= */

.lista-capitulos-indice {
    overflow: hidden;

    border: 1px solid rgba(181, 128, 38, .25);
    border-radius: 16px;

    background: #fffdf8;
}


.capitulo-indice {
    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr)
        40px;

    gap: 1rem;

    align-items: center;

    padding: 1.15rem 1.25rem;

    border-bottom:
        1px solid rgba(181, 128, 38, .18);
}


.capitulo-indice:last-child {
    border-bottom: 0;
}


.capitulo-indice-numero {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: #f1dfb8;

    color: #7c5116;

    font-weight: 800;
}


.capitulo-indice-contenido h4 {
    margin: 0 0 .3rem;

    font-size: 1.08rem;
    font-weight: 800;
}


.capitulo-indice-contenido h4 a {
    color: #17283c;
    text-decoration: none;
}


.capitulo-indice-contenido h4 a:hover {
    color: #a32013;
}


.capitulo-indice-contenido p {
    max-width: 950px;

    margin: 0;

    color: #596574;

    font-size: .95rem;
    line-height: 1.55;
}


.capitulo-indice-flecha {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.35rem;

    color: #a32013;

    text-decoration: none;
}


/* =========================================================
   AMPLIACIONES
========================================================= */

.indice-ampliaciones {
    margin-top: 2.3rem;
}


.grupos-ampliaciones {
    display: grid;
    gap: 1rem;
}


.grupo-ampliaciones {
    padding: 1.15rem 1.3rem;

    border-left: 4px solid #d1a352;
    border-radius: 0 14px 14px 0;

    background: rgba(249, 245, 236, .74);
}


.grupo-ampliaciones-padre {
    display: flex;
    align-items: center;
    gap: .5rem;

    margin-bottom: .8rem;

    font-weight: 800;
}


.grupo-ampliaciones-padre span {
    color: #a57528;
}


.grupo-ampliaciones-padre a {
    color: #23344a;

    text-decoration: none;
}


.grupo-ampliaciones-padre a:hover {
    color: #a32013;
}


.lista-ampliaciones {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: .7rem;
}


.ampliacion-indice {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    gap: .7rem;

    align-items: center;

    padding: .75rem .9rem;

    border: 1px solid rgba(181, 128, 38, .20);
    border-radius: 12px;

    background: rgba(255, 255, 255, .82);

    color: #26364b;

    font-weight: 650;
    text-decoration: none;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.ampliacion-indice:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(33, 42, 54, .08);

    color: #9d1f12;
}


.ampliacion-indice-flecha {
    color: #a32013;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

    .indice-periodo-cabecera {
        flex-direction: column;
        align-items: flex-start;

        gap: 1rem;

        padding: 1.3rem;
    }


    .capitulo-indice {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: .8rem;

        padding: 1rem;
    }


    .capitulo-indice-numero {
        width: 42px;
        height: 42px;
    }


    .capitulo-indice-flecha {
        display: none;
    }


    .lista-ampliaciones {
        grid-template-columns: 1fr;
    }

}