/*======================================================*/
/* La Escritura                                      */
/* Archivo.....: study-accordion.css                    */
/* Versión.....: 3.0.0                                  */
/* Fecha.......: 30-07-2026                             */
/* Descripción.: Ventana del Acordeón.                  */
/*======================================================*/

/*======================================================*/
/* Ventana                                              */
/*======================================================*/

.accordion-window
{
    position: fixed;

    inset: 0;

    z-index: 99999;

    opacity:0;

    animation:
        accordionFadeIn .30s ease forwards;
}

/*======================================================*/
/* Fondo                                                 */
/*======================================================*/

.accordion-window-overlay
{
    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.55);

    backdrop-filter: blur(2px);
}

/*======================================================*/
/* Diálogo                                              */
/*======================================================*/

.accordion-window-dialog
{
    position:absolute;

    top:50%;

    left:50%;

    transform:
        translate(-50%,-50%)
        translateY(25px)
        scale(.98);

    width:90%;

    max-width:900px;

    height:80vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border-radius:12px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.22);

    opacity:0;

    animation:
        accordionPanelIn .35s ease forwards;
}

/*======================================================*/
/* Cabecera                                             */
/*======================================================*/

.accordion-window-header
{
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 24px;

    background: #f8f5ef;

    border-bottom: 1px solid #e8dfd1;
}

/*------------------------------------------------------*/

.accordion-window-title
{
    margin: 0;

    font-size: 22px;

    font-weight: 600;
}

/*------------------------------------------------------*/

.accordion-window-close
{
    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#7d6746;

    font-size:1.2rem;

    cursor:pointer;

    box-shadow:0 2px 6px rgba(0,0,0,.08);

    transition:
        background .25s ease,
        transform .25s ease;
}

.accordion-window-close:hover
{
    background:#efe6d4;

    transform:rotate(90deg);
}

/*======================================================*/
/* Contenido                                            */
/*======================================================*/

.accordion-window-content
{
    flex:1;

    padding:28px 20px;

    overflow-y:auto;
}

/*======================================================*/
/* Pie                                                  */
/*======================================================*/

.accordion-window-footer
{
    padding:14px 24px;

    background:#f8f5ef;

    border-top:1px solid #e8dfd1;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

    font-size:.95rem;

    color:#6f614b;

    text-align:center;
}

/*======================================================*/
/* Responsive                                           */
/*======================================================*/

@media (max-width:768px)
{
    .accordion-window-dialog
    {
        width: 100%;

        height: 100%;

        max-width: none;

        max-height: none;

        border-radius: 0;

        transform:
        translate(-50%,-50%)
        translateY(25px)
        scale(.98);

    }
}

/*======================================================*/
/* Animación de apertura                                */
/*======================================================*/

@keyframes accordionFadeIn
{
    from
    {
        opacity:0;
    }

    to
    {
        opacity:1;
    }
}

@keyframes accordionPanelIn
{
    from
    {
        opacity:0;

        transform:
            translate(-50%,-50%)
            translateY(25px)
            scale(.98);
    }

    to
    {
        opacity:1;

        transform:
            translate(-50%,-50%)
            translateY(0)
            scale(1);
    }
}

/*======================================================*/
/* Lista de subtítulos                                  */
/*======================================================*/

.study-category-content
{
    display:none;

    padding:12px 0 18px;
}

/*------------------------------------------------------*/

.study-category-content a
{
    display:block;

    padding:12px 16px;

    margin:6px 0;

    text-decoration:none;

    color:#3f3525;

    background:#faf7f1;

    border:1px solid #e7dece;

    border-radius:8px;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

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

/*------------------------------------------------------*/

.study-category-content a:hover
{
    background:#f3ebdb;

    border-color:#d7c39a;

    transform:translateX(4px);
}

/*------------------------------------------------------*/

.study-category-content a:active
{
    transform:scale(.98);
}

/*------------------------------------------------------*/

.study-category-content a:last-child
{
    margin-bottom:0;
}

/*======================================================*/
/* Subtítulos                                           */
/*======================================================*/

.study-subtitle-item
{
    display:grid;

    grid-template-columns:max-content 1fr;

    gap:18px;

    align-items:center;

    padding:12px 16px;

    margin:6px 0;

    text-decoration:none;

    background:#faf7f1;

    border:1px solid #e7dece;

    border-radius:8px;

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

.study-subtitle-item:hover
{
    background:#f3ebdb;

    border-color:#d7c39a;

    transform:translateX(4px);
}

.study-subtitle-reference
{
    display:flex;

    justify-content:space-between;

    align-items:center;

    width:120px;

    white-space:nowrap;
}

.study-book
{
    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

    color:#8b6d2f;
}

.study-chapter
{
    width:28px;

    text-align:right;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

    color:#8b6d2f;

    margin-bottom:12px;
}

.study-subtitle-title
{
    color:#3f3525;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;
}

/*======================================================*/
/* Libros                                               */
/*======================================================*/

.study-book
{
    margin-bottom:12px;
}

/*------------------------------------------------------*/

.study-book-title
{
    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#3f3525;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

    font-size:1.05rem;

    padding:10px 0;
}

/*------------------------------------------------------*/

.study-book-content
{
    display:none;

    padding:12px 0 18px;
}

/*------------------------------------------------------*/

.study-book-content > a
{
    display:block;

    padding:12px 16px;

    margin:6px 0;

    text-decoration:none;

    color:#3f3525;

    background:#faf7f1;

    border:1px solid #e7dece;

    border-radius:8px;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

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

/*------------------------------------------------------*/

.study-book-content a:hover
{
    background:#f3ebdb;

    border-color:#d7c39a;

    transform:translateX(4px);
}

/*------------------------------------------------------*/

.study-book-content a:active
{
    transform:scale(.98);
}

/*------------------------------------------------------*/

.study-book-content a:last-child
{
    margin-bottom:0;
}

/*======================================================*/
/* Testamentos                                          */
/*======================================================*/

.study-testament
{
    margin:28px 0 18px;

    padding:10px 0;

    text-align:center;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

    font-size:1rem;

    color:#8b6d2f;

    text-transform:uppercase;

    letter-spacing:2px;

    border-top:1px solid #d7c39a;

    border-bottom:1px solid #d7c39a;

    background:#faf7f1;
}

.study-testament:first-child
{
    margin-top:0;
}

/*======================================================*/
/* Cabecera del libro                                   */
/*======================================================*/

.study-book-header
{
    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:10px 14px;

    background:#f1f3f5;

    border:1px solid #d8dde3;

    border-radius:8px;

    box-sizing:border-box;

    transition:
        background .20s ease,
        border-color .20s ease;
}

.study-book-title:hover .study-book-header
{
    background:#e4e8ec;

    border-color:#bfc8d1;
}

/*------------------------------------------------------*/

.study-book-total-chapters
{
    min-width:70px;

    text-align:right;

    color:#8b6d2f;

    font-size:.88rem;

    white-space:nowrap;

    margin-left:20px;
}

/*======================================================*/
/* Capítulos del libro                                  */
/*======================================================*/

.study-book-item
{
    margin:6px 0;
}

/*------------------------------------------------------*/

.study-book-chapters-toggle
{
    display:block;

    padding:12px 16px;

    text-decoration:none;

    color:#3f3525;

    background:#faf7f1;

    border:1px solid #e7dece;

    border-radius:8px;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

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

/*------------------------------------------------------*/

.study-book-chapters-toggle:hover
{
    background:#f3ebdb;

    border-color:#d7c39a;

    transform:translateX(4px);
}

/*------------------------------------------------------*/

.study-book-chapters-content
{
    display:none;

    padding:14px 6px 6px;
}

/*------------------------------------------------------*/

.study-book-chapters-grid
{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    justify-content:flex-start;

    padding:12px 0;
}

/*------------------------------------------------------*/

.study-book-chapter
{
    width:30px;

    height:30px;

    flex:0 0 30px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#eef1f4;

    border:1px solid #d8dde3;

    border-radius:4px;

    color:#4d4d4d;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

    font-size:.78rem;

    line-height:1;

    transition:
        background .20s ease,
        border-color .20s ease,
        color .20s ease;
}

.study-book-chapter:hover
{
    background:#d8dde3;

    border-color:#bfc8d1;

    color:#2f2f2f;
}

/*------------------------------------------------------*/
/* Capítulo actual                                      */
/*------------------------------------------------------*/

.study-book-chapter-active
{

    background-image:
        linear-gradient(
            #6B0F1A,
            #C27C6D
        );
        color:#ffffff;  

    border-color:#bfc8d1;

    font-weight:bold;
}

/*------------------------------------------------------*/
/* Subtítulos del libro                                 */
/*------------------------------------------------------*/

.study-book-subtitles-toggle
{
    display:block;

    padding:12px 16px;

    text-decoration:none;

    color:#3f3525;

    background:#faf7f1;

    border:1px solid #e7dece;

    border-radius:8px;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

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

.study-book-subtitles-toggle:hover
{
    background:#f3ebdb;

    border-color:#d7c39a;

    transform:translateX(4px);
}

.study-book-subtitles-content
{
    display:none;

    padding:14px 6px 6px;
}

.study-book-subtitle-item
{
    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 12px;

    margin-bottom:6px;

    text-decoration:none;

    color:#3f3525;

    background:#eef1f4;

    border:1px solid #d8dde3;

    border-radius:8px;

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

.study-book-subtitle-item:hover
{
    background:#d8dde3;

    border-color:#bfc8d1;

    transform:translateX(4px);
}

@media (max-width:1200px)
{
  .accordion-window-close
{
    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#7d6746;

    font-size:1.55rem;

    cursor:pointer;

    box-shadow:0 2px 6px rgba(0,0,0,.08);

    transition:
        background .25s ease,
        transform .25s ease;
}

.accordion-window-close:hover
{
    background:#efe6d4;

    transform:rotate(90deg);
}

.study-book-chapter
{
    width:43px;

    height:43px;

    flex:0 0 43px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#eef1f4;

    border:1px solid #d8dde3;

    border-radius:4px;

    color:#4d4d4d;

    font-family:'TTFirsNeue-Medium', Arial, sans-serif;

    font-size:.95rem;

    line-height:1;

    transition:
        background .20s ease,
        border-color .20s ease,
        color .20s ease;
}

.study-book-chapter:hover
{
    background:#d8dde3;

    border-color:#bfc8d1;

    color:#2f2f2f;
}

/*------------------------------------------------------*/
/* Capítulo actual                                      */
/*------------------------------------------------------*/

.study-book-chapter-active
{

    background-image:
        linear-gradient(
            #6B0F1A,
            #C27C6D
        );
        color:#ffffff;  

    border-color:#bfc8d1;

    font-weight:bold;
}

.study-subtitle-reference
{
    display:flex;

    justify-content:space-between;

    align-items:center;

    width:70px;

    white-space:nowrap;
}


}