/** 
 * SITE
 *      <----------------|··················   <MD          (screen < 768)
    ========================================================================== */


@font-face {
    font-family: Maestro;
    src: url(/fonts/MAESTRO_.TTF) format('truetype') /*url(/fonts/FinaleMaestro.woff2) format('woff2'),
          url(/fonts/FinaleMaestro.woff) format('woff'),
          url(/fonts/FinaleMaestro.otf) format('opentype')*/;
    font-weight: normal;
    font-style: normal
}

h3, .h3 {
    font-size: min(calc(1.3rem + 0.6vw), 1.25rem);
}

h4, .h4 {
    font-size: min(calc(1.275rem + 0.3vw), 1.15em);
}

.enumeration {
    list-style: none;
}

.main-content p {
    text-wrap: pretty;
}




/** 
 * Alert (.alert)
 *
 * @markup
    <div class="alert[ show]" role="alert">
        <svg>[path]</svg>
        <ul class="validation-message-list">[li]</ul>
        <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="[text]"></button>
    </div>
    ========================================================================== */


/**
 * Fuerza la orientación del texto, en caso de que esté dentro de una orientación diferente.
 */
.alert {
    text-align: left;
}

.validation-message-list {
    list-style: none;
}




/** 
 * Card (.card)
    ========================================================================== */


.card {
    --mdb-border-radius: 0;
    --mdb-card-border-radius: var(--mdb-border-radius);
    --mdb-card-inner-border-radius: var(--mdb-border-radius);
    border-radius: var(--mdb-border-radius);
}

.main-card__card {
    margin-block: 3rem;
}

    .main-card__card form label {
        color: rgb(10, 80, 180);
        font: var(--dizo-label-font);
        font-variation-settings: var(--dizo-label-font-variation-settings);
        font-weight: bold;
        letter-spacing: var(--dizo-label-letter-spacing);
    }

    .main-card__card button {
        margin-inline: auto;
        width: auto;
    }

    .main-card__card p {
        font: var(--dizo-button-font);
        font-variation-settings: var(--dizo-button-font-variation-settings);
        letter-spacing: var(--dizo-button-letter-spacing);
    }

.main-card__header {
    font-weight: bold !important;
}




/** 
 * Carousel (.carousel)    
    ========================================================================== */


.carousel {
    margin-bottom: 1rem;
}




/** 
 * Top (.top)
 *
 *  PBI 1702
 *
 * @markup
    <a class="top">
        <span>[text]</span>
    </a>
    ========================================================================== */


/**
 * 1. PBI 2427 Task 2461
 */
.top {
    bottom: 1rem;
    background: no-repeat center url(/svg/navigation/arrow-back.svg);
    display: block;
    height: 1rem;
    margin-left: 95%; /* 1 */
    min-width: 1rem;
    padding: 0.75em; /* 1 */
    position: sticky;
    transform: rotate(90deg);
    width: 1rem;
}

    .top:focus,
    .top:hover {
        border: none !important;
    }




/** 
 * Form > Check
 *
 * @markup
    <div class="form-check">
        <input class="form-check-input" />
        <label class="form-check-label">[text]</label>
    </div>
    ========================================================================== */


.form-check-input {
    border-width: 1px;
}




/** 
 * Form > Field > Help   (.field-help)
 *
 * BEM
 *  field-help
 *      __input
 *      __btn
 *
 * @markup
    <div class="field-help">
        <input class="field-help__input" />
        <button class="field-help__btn">[text]</button>
    </div>
    ========================================================================== */


.field-help {
    position: relative;
}

.field-help__btn {
    --mdb-btn-padding-top: 0.125rem;
    --mdb-btn-padding-bottom: 0;
    --mdb-btn-border-radius: /*0 0.25rem 0.25rem 0*/ 0;
    --mdb-btn-padding-x: 1rem;
    border: none;
    bottom: 0;
    position: absolute;
    right: 2.5rem;
    top: 2.5rem;
}

.field-help__input {
    padding-right: 3rem;
}




/** 
 * Form > Field > Password   (.show-password)
 *
 * @markup
    <div class="field-help">
        <input class="field-help__input" />
        <button class="field-help__btn">[text]</button>
    </div>
    ========================================================================== */


*:has(> .show-password) {
    position: relative;
}

.show-password {
    background: no-repeat center url(/img/eye-password-show-svgrepo-com.svg);
    background-size: 1rem;
    border: none;
    bottom: 0.1rem;
    display: block;
    height: 2rem;
    right: 0.5rem;
    position: absolute;
    width: 2rem !important;
}

input[type="password"] ~ .show-password {
    background-image: url(/img/eye-password-hide-svgrepo-com.svg);
}




/** 
 * Form > Selector multiple (.select-wrapper)
 *
 * @markup
    <div class="select-wrapper">
        <div class="form-outline">
            <input class="form-control select-input" role="combobox" aria-multiselectable="true" />
            <span class="select-arrow"></span>
            <div class="form-notch">
                <div class="form-notch-leading"></div>
                <div class="form-notch-middle"></div>
                <div class="form-notch-trailing"></div>
            </div>
        </div>
        <select class="form-select">
                [<option>[text]</option>]
        </select>
    </div>
    ========================================================================== */


.form-notch-leading,
.form-notch-trailing {
    border-radius: 0 !important;
}

.select-input.focused {
    --mdb-form-outline-select-input-focused-color: var(--dizo-color-gondola);
}




/** 
 * Form > Selector multiple > Desplegable   (.select-dropdown-container)
 *
 * @markup
    <div class="select-dropdown-container">
        <div class="select-dropdown[ open]">
            <div class="input-group">
                <input class="form-control select-filter-input" role="searchbox" type="text" />
            </div>
            <div class="select-options-wrapper">
                <div class="select-options-list">
                    [<div class="select-option select-all-option" role="option">
                        <span class="select-option-text">
                            <input type="checkbox" class="form-check-input" />
                            [text]
                        </span>
                    </div>]
                </div>
            </div>
        </div>
    </div>
    ========================================================================== */


.select-option:hover:not(.disabled),
.select-option:hover:not(.disabled)::before {
    --mdb-form-outline-select-option-hover-not-disabled-bg: var(--dizo-color-alabaster);
}

.select-option-text {
    --mdb-form-outline-select-option-color: var(--dizo-color-gondola);
}




/** 
 * Icon
 *
 * @markup
    <img class="icon--[modifier]" />
    ========================================================================== */


.icon {
    display: inline-block;
    height: 1em;
}




/** 
 * Navigation link (.navigation-link)
 *
 *  PBI 1701
 *
 * @markup
    <a class="navigation-link[--top]">[content]</a>
    ========================================================================== */


.navigation-link:has(img[src="/svg/navigation/arrow-back.svg"]),
.row:has(> .navigation-back) {
    position: sticky;
    top: 7rem;
    z-index: 1;
}

.navigation-link:has(img[src="/svg/navigation/arrow-back.svg"]) {
    background-color: #fbfafb;
    font: var(--dizo-caption-2-font);
    font-variation-settings: var(--dizo-caption-2-font-variation-settings);
    letter-spacing: var(--dizo-caption-2-letter-spacing);
}

.navigation-link--top img {
    transform: rotate(90deg);
}

@media (width < 1200px) {
    .navigation-link:has(img[src="/svg/navigation/arrow-back.svg"]), .row:has(> .navigation-back) {
        top: 9rem;
    }
}




/** 
 * Searcher
 *
 * BEM
 *  searcher
 *      __reset
 *      __input[--literal]
 *      __trigger
 *          __trigger-loupe
 *
 * @markup
    <form class="searcher">
        <button class="searcher__reset">[text]</button>
        [<div class="searcher__input">[text]</div>]
        [<input class="searcher__input" />]
        [<select class="searcher__input[--literal]">[option]</select>]
        [<div>
            <label class="form-label">[text]</label>
            <div class="searcher__input">[interval]</div>
        </div>]
        <button class="searcher__trigger">
            [<img class="searcher__trigger-loupe"" />]
            [text]
        </button>
    </form>
    ========================================================================== */


.searcher__reset {
    border-radius: inherit;
}

.searcher__trigger--singer {
    color: var(--dizo-color-dusty);
    display: inline-block;
}

.form-control.select-input {
    font-size: inherit;
}




/** 
 * Searcher Landing Page (.searcher--landing-page)
 *
 * @markup
    <form class="searcher--landing-page searcher row">
        <div class="input-group">
            <input class="searcher__input" type="text" />
            <button class="searcher__trigger" type="button">
                <img alt="[text]" class="searcher__trigger-loupe" src="[url]" />
            </button>
        </div>
        <section class="accordion">[accordion]</section>
    </form>
    ========================================================================== */


.searcher--landing-page .accordion-button {
    padding-inline: 1rem;
}

.searcher--landing-page :is(.accordion-collapse.collapsing, .accordion-collapse.show) {
    display: grid;
    gap: 0.25rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    padding-inline: 1rem;
    text-align: left;
}




/** 
 * Searcher > Interval  (.interval)
 *
 * BEM
 *  interval
 *      __start
 *      __end
 *      __error
 *
 * @markup
    <div>
        <label>[text]</label>
        <div class="interval">
            <input class="interval__start" />
            <label>[text]</label>
            <input class="interval__end" />
            <div class="interval__error">[text]</div>
        </div>
    </div>
    ========================================================================== */


.invalid-feedback {
    position: static;
}




/** 
 * Page > Header > Main    (.header__main)
 *
 * @markup
    <div class="header__main">
        <form class="header__searcher">[header-searcher]</form>
        [<a>[text]</a>]
        <div class="header__security">[header-security]</div>
    </div>
    ========================================================================== */


.header__main nav > a::after {
    content: '';
    position: absolute;
    display: block;
    padding: 1rem;
    bottom: 0;
}

@media (width < 1200px) {
    .header__main {
        align-items: end;
        flex-direction: column-reverse;
    }

        .header__main nav > a {
            position: relative;
        }
}

.header__searcher .select-wrapper {
    --width: 10.75rem;
    max-width: var(--width);
    min-width: var(--width);
}

.page--acerca-de_4_diccionario nav a[href="/dz/acerca-de/4/diccionario"]::after {
    border-bottom: 2px solid;
    width: 9.5ch;
}

.page--guia_9_guia-uso nav a[href="/dz/guia/9/guia-uso"]::after {
    border-bottom: 2px solid;
    width: 8.5ch;
}

body[class*="page--noticias_"] .detail__header {
    display: block;
}

body[class*="page--noticias_"] .page__subtitle {
    font-weight: normal;
}




/** 
 * Main content > Page Detail > Advanced Searcher Page (.page--buscador-voces)
 *
 * @markup
    <body class="page--buscador-voces">
        [content]
        <main class="main-content">
            [content]
            <form action="[url]" class="searcher">
                <div>
                    <h2 class="searcher__title fs-5">[text]</h2>
                    <div>
                        <div>
                            <label class="form-label">[text]</label>
                            [content]
                        </div>
                    </div>
                    [content]
                </div>
                [content]
            </form>
            [content]
        </main>
        [content]
    </body>
    ========================================================================== */


/**
 * PBI 2439 (añadido `.main-content` para evitar que afecte a `.header`)
 */
.page--buscador-voces .main-content .searcher .form-label {
    color: rgb(10, 80, 180);
    font: var(--dizo-label-font);
    font-variation-settings: var(--dizo-label-font-variation-settings);
    font-weight: bold;
    letter-spacing: var(--dizo-label-letter-spacing);
}


.page--buscador-voces .searcher__title {
    border-bottom: 1px solid;
    font: var(--dizo-heading-4-font);
    font-weight: bold;
    font-size: 1.25rem;
    letter-spacing: var(--dizo-heading-4-letter-spacing);
}




/** 
 * Main content (.main-content)
 *
 * BEM
 *  main-content
 *      __authors
 *      __text
 *
 * @markup
    <main class="main-content">
        [text]
        [<article class="main-content__[authors|help|text]">[text]</article>]
    </main>
    ========================================================================== */


:is(.main-content,.modal-content) .btn {
    --mdb-btn-color: var(--dizo-color-gondola);
    border-radius: 1rem;
    border-width: 1px;
    color: var(--mdb-btn-color);
    font: var(--dizo-caption-2-font);
    font-variation-settings: var(--dizo-caption-2-font-variation-settings);
    letter-spacing: var(--dizo-caption-2-letter-spacing);
    text-transform: none;
}

.main-content {
    flex-grow: 1;
    font: var(--dizo-body-font);
    letter-spacing: var(--dizo-body-letter-spacing);
    min-height: 80dvh;
}

.main-content {
    color: #000;
    font-size: 1.15rem;
}


    .main-content :is(a, .btn--text, .standalone-link) {
        border-bottom: 1px solid transparent;
        color: rgb(10,80,180);
        font-weight: 600;
        transition: all 500ms;
        width: -moz-fit-content;
        width: fit-content;
    }

        .main-content :is(a, .btn--text, .standalone-link):hover {
            border-bottom-color: var(--dizo-color-azur);
            color: var(--dizo-color-cool-grey);
        }

.main-content__authors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 4rem;
    padding-bottom: 3rem;
}

    .main-content__authors .card-body {
        display: flex;
        flex-direction: column;
    }

        .main-content__authors .card-body img {
            width: 1rem;
        }

        .main-content__authors .card-body .card-text {
            flex-grow: 1;
        }

    /**
     * PBI 1122 (imagen en gris toma color en over)
     */
    .main-content__authors .card-img-top {
        filter: grayscale(1);
        transition: filter 500ms;
    }

        .main-content__authors .card-img-top:hover {
            filter: grayscale(0);
        }

    .main-content__authors .page-title {
        grid-column: 1 / -1;
        width: 100%;
    }

.main-content__text {
    background: var(--dizo-color-white);
    margin-inline: auto;
    max-width: 80ch;
    padding: 1rem;
}

    .main-content__text h3 {
        font: var(--dizo-heading-5-font);
        letter-spacing: var(--dizo-heading-5-letter-spacing);
    }

    .main-content__text .accordion-collapse {
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

.main-content__video iframe {
    aspect-ratio: 560/315;
    width: 100%;
}




/** 
 * Main content > Card (.card)
 *
 * BEM
 *  card
 *      __type--[familia|obra|person|term|xref]
 *
 * @markup
    <div class="card">
        <img />
        <div>
            <small class="card__type--[modifier]">
                [svg]
                [text]
            </small>
            [text]
        </div>
    </div>
    ========================================================================== */


.row--voice__author,
.row--voice__type {
    display: block;
}

.row--voice__author,
.row--voice__type {
    --dizo-size: 1.2em;
    background-repeat: no-repeat;
    background-size: var(--dizo-size) /*contain*/;
    font: var(--dizo-caption-2-font);
    font-variation-settings: var(--dizo-caption-2-font-variation-settings);
    letter-spacing: var(--dizo-caption-2-letter-spacing);
    vertical-align: central;
}

.row--voice__type {
    white-space: nowrap;
}

    .row--voice__type svg {
        display: inline-block;
        /*fill: currentColor;*/
        height: 1em;
        transform: translateY(-0.1rem);
        width: 1em;
    }




/** 
 * Main content > Navigation (.main-nav)
 *
 * BEM
 *  main-nav
 *      __link
 *          __icon
 *
 * @markup
    <nav class="main-nav">
        <a class="main-nav__link" href="[url]">
            <img alt="[text]" class="main-nav__icon" src="[url]" />
        </a>
    </nav>
    ========================================================================== */


.main-nav__icon,
.main-nav__link {
    display: block;
}

.main-nav__icon {
    border-radius: 50%;
    padding: 0.25rem;
    transition: 150ms background-color;
}

    .main-nav__icon:hover {
        background-color: var(--dizo-color-swiss-coffee);
    }

.main-content .main-nav__link {
    border-bottom-width: 0;
    width: min-content;
}

*[id^="nav-item--"] {
    scroll-margin-top: 6.5rem; /* PBI 1528 (contrarrestar el sticky del header) */
}




/** 
 * Main content > Landing Page > Intro (.landing-page-intro)
 *
 * BEM
 *  landing-page-intro
 *      __title
 *      __content
 *          __call-to-action
 *
 * @markup
    <section class="landing-page-intro">
        <h2 class="landing-page-intro__title">[text]</h2>
        <div class="landing-page-intro__content">
            [text]
            <a class="landing-page-intro__call-to-action">[text]</a>
        </div>
    </div>
    ========================================================================== */


.landing-page {
    container-type: inline-size;
}

.landing-page-intro {
    padding-block: 1rem;
}

    /**
 * 1. Para incrementar su precedencia y evitar el uso de !important.
 * 2. Centrado horizontal. (margin auto no funciona)
 */
    .landing-page-intro /* 1 */ .landing-page-intro__call-to-action,
    .landing-page-intro /* 1 */ .landing-page-intro__call-to-action:hover {
        border: var(--mdb-btn-border-width) solid currentColor;
        margin-left: 50%; /* 2 */
        transform: translateX(-50%); /* 2 */
    }

.landing-page-intro__title {
    font: var(--dizo-heading-5-font);
    letter-spacing: var(--dizo-heading-5-letter-spacing);
}

/**
 * PBI 1406 Task 1426
 */
@container (min-width: 650px) {
    .landing-page-intro {
        background: no-repeat right top url(/img/landing-page/landing-dizo.png);
        background-size: contain;
    }

    .landing-page-intro__content {
        max-width: 30ch;
    }

    .landing-page-intro__title {
        max-width: 15ch;
    }
}




/** 
 * Main content > Landing Page > Latest updated (.landing-page-latest-updated)
 *
 * BEM
 *  landing-page-latest-updated
 *      __title
 *      __item
 *
 * @markup
    <section class="landing-page-latest-updated">
        <h2 class="landing-page-latest-updated__title">[text]</h2>
        <p>[text]</p>
        <div>
            <div class="landing-page-latest-updated__item">[card-latest-updated]</div>
            [landing-page-latest-updated__item]
            [landing-page-latest-updated__item]
        </div>
    </section>
    ========================================================================== */


.landing-page-latest-updated__title {
    font: var(--dizo-heading-5-font);
    letter-spacing: var(--dizo-heading-5-letter-spacing);
    text-align: center;
    text-transform: uppercase;
}

.landing-page-latest-updated > p {
    max-width: 100%;
}




/** 
 * Main content > Landing Page > Latest updated > Card (.card-latest-updated)
 *
 * BEM
 *  card-latest-updated
 *      __image
 *      __title
 *
 * @markup
    <div class="card-latest-updated">
        <img class="card-latest-updated__image" />
        <div>
            <small class="card__type">[text]</small>
            <a class="card-latest-updated__title">[text]</a>
            <p>[text]</p>
        </div>
    </div>
    ========================================================================== */


.card-latest-updated {
    background-color: rgba(0, 0, 0, 0);
    height: 100%;
}

.card-latest-updated__image {
    object-fit: cover;
}

.card-latest-updated__title {
    font: var(--dizo-heading-6-font);
    letter-spacing: var(--dizo-heading-6-letter-spacing);
}




/** 
 * Link (.see-all)
 *
 * @markup
    <a class="btn-outline-success border-bottom rounded px-3 py-1" href="[url]">[text]</a>
    ========================================================================== */


.see-all {
    --dizo-color-accent-color: var(--mdb-body-color);
    --dizo-color-cool-grey: var(--mdb-surface-bg); /* :hover */
    border-bottom-color: var(--mdb-btn-outline-border-color) !important;
    font-family: var(--mdb-body-font-family);
}




/** 
 * Main content > Landing Page > Stand out > Card (.card-stand-out)
 *
 * BEM
 *  card-stand-out
 *      __image
 *      __body
 *          __type--[person|term|work]
 *          __title
 *          __extra-content (.mb-0 con p)
 *
 * @markup
    <div class="card-stand-out">
        <img class="card-stand-out__image" />
        <div class="card-stand-out__body">
            <small class="card-stand-out__type--[modifier]">[text]</small>
            <a class="card-stand-out__title">[text]</a>
            <[div|p] class="card-stand-out__extra-content[| mb-0]">[text]</[div|p]>
        </div>
    </div>
    ========================================================================== */


.card-stand-out {
    --mdb-border-radius: 1rem;
    height: 100%;
    position: relative;
}

.card-stand-out__body:has(h2) {
    background-color: var(--mdb-dark-text-emphasis);
}

.card-stand-out__extra-content {
    max-height: 0;
    overflow: auto;
}

.card-stand-out:hover .card-stand-out__extra-content {
    max-height: 100%;
}

.card-stand-out__footer a {
    --dizo-color-accent-color: var(--mdb-surface-bg);
    --dizo-color-cool-grey: var(--mdb-surface-bg); /* :hover */
    background-color: var(--mdb-gray);
    font-family: var(--mdb-body-font-family);
}

.card-stand-out__image {
    height: 10rem;
    object-fit: cover;
    width: auto;
}

.card-stand-out__title {
    font: var(--dizo-heading-6-font);
    letter-spacing: var(--dizo-heading-6-letter-spacing);
}




/** 
 * Main content > Page Detail (.detail)
 *
 * BEM
 *  detail
 *      __type
 *      __aside
 *          __aside-wrapper
 *              __tool-list
 *                  __tool
 *              __nav
 *      __info
 *          __header
 *              __title
 *              __author
 *              __publication-time
 *          __content
 *          __extra-info
 *
 * @markup
    <div class="detail">
        <div>
            <div>[script]</div>
            <div class="detail__type">[text]</div>
        </div>
        <div>
            <aside class="detail__aside">
                <input class=detail__aside-trigger" />
                <label class=detail__aside-label"></label>
                <div class="detail__aside-wrapper">
                    <ul class="detail__tool-list">
                        <li class="detail__tool">[favorite|text]</li>
                        [detail__tool]
                    </ul>
                    <nav class="detail__nav">[nav-detail]</nav>
                <div>
            </aside>
            <article class="detail__info">
                <div class="detail__header">
                    <h1 class="detail__title">[page-title]</h1>
                    [<cite class="detail__author">[text]</cite>]
                    [<section class="detail__publication-time">[dl]</section>]
                </div>
                [<[article|section] class="detail__content">[characters|comment|editions-libretto|editions-music|musical-numbers|plot|sources]</[article|section]>]
                [<[article|section] class="detail__extra-info">[bibliography|entry]</[article|section]>]
            </article>
            <aside class="detail__aside">[related]</aside>
        </div>
    </div>
    ========================================================================== */


.detail__aside {
    font: var(--dizo-button-font);
    font-variation-settings: var(--dizo-button-font-variation-settings);
    letter-spacing: var(--dizo-button-letter-spacing);
}


/**
 * 1. PBI 2466 (control de altura en páginas que no son la de detalle)
 */
.detail__aside:not(:has(.detail__aside-wrapper)) .nav-detail.sticky-top /* 1 */,
.detail__aside-wrapper {
    top: 10rem; /* 1 */
    transform: translateY(-1.2rem);
}

.detail__title {
    margin-bottom: 0;
    padding-bottom: 0 !important;
}

.detail__tool {
    cursor: pointer;
}

    .detail__tool.dropdown {
        position: relative;
    }

    .detail__tool .dropdown__actuator {
        cursor: pointer;
    }

/**
     * PBI 2416 (cuando el checkbox oculto recibe el foco mediante TAB)
     */
.dropdown__trigger:focus-visible + .dropdown__actuator {
    border-radius: 4px;
    outline: 2px solid;
    outline-offset: 2px;
}

.detail__tool .dropdown__target {
    display: none;
    left: 150%;
    list-style: none;
    padding-left: 0;
    position: absolute;
    top: 0;
}


/**
     * 1. Debajo del listado de herramientas.
     * 2. Sobre el menú de navegación.
     */
.detail__tool .dropdown__trigger:checked ~ .dropdown__target {
    display: block;
    background-color: #ede9e6;
    border-radius: 1rem;
    left: 0;
    padding: 0.5rem;
    top: 3rem;
    transform: translateX(-1rem); /* 1 */
    z-index: 1; /* 2 */
}

/**
 * PBI 2416
 */
.detail__tool-btn {
    background-color: transparent;
    border: none;
}

.detail__tool-list a {
    color: #000 !important;
}

    .detail__tool-list a:hover {
        border-bottom-color: transparent !important;
        text-decoration: none;
    }

@media (min-width: 768px) {

    .detail__author {
        grid-row: 2 / 3;
        margin-bottom: 0 !important;
    }

    .detail__header {
        display: grid;
        gap: 0.5rem;
        grid-template: auto / 1fr max-content;
        grid-auto-flow: row;
    }

    .detail__publication-time {
        align-self: end;
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

@media (max-width: 767px) {
    /**
     * 1. PBI 1406 Task 1411 (necesario para Safari)
     * 2. Bug 1436 (dejar el menú por encima de la galería)
     */
    .detail__aside:has(.nav-detail) {
        -webkit-backdrop-filter: blur(0.5rem); /* 1 */
        backdrop-filter: blur(0.5rem);
        background: transparent;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        inset: 8rem 50% 2rem 0rem;
        max-width: max(50%, 22rem);
        padding-block: 1rem;
        position: fixed;
        transform: translateX(calc(-100% + 1rem));
        transition: 250ms transform;
        z-index: 3; /* 2 */
    }


    .detail__aside-wrapper > * {
        background-color: transparent;
    }

    .header {
        z-index: 3; /* PBI 1519 (para estar por debajo del menú de navegación en la ficha) */
    }

    .detail__aside:has(.detail__aside-trigger:checked) {
        background-color: rgb(255 255 255 / 0.3);
        transform: translateX(0%);
    }

    .detail__aside-label {
        align-items: center;
        background: var(--dizo-color-accent-color);
        cursor: pointer;
        display: flex;
        inset: 0 0 0 auto;
        justify-content: center;
        position: absolute;
        width: 1rem;
        z-index: 1021;
    }

        .detail__aside-label::before {
            border: solid var(--dizo-color-white);
            border-width: 2px 2px 0 0;
            content: '';
            display: block;
            height: 0.75rem;
            transform: translateX(-25%) rotate(45deg);
            transform-origin: 50% 50%;
            width: 0.75rem;
        }

    .detail__aside:has(.detail__aside-trigger:checked) .detail__aside-label::before {
        transform: translateX(25%) rotate(225deg);
    }

    .detail__tool-list,
    .nav-detail {
        margin-right: 1rem;
    }

    .nav-detail {
        flex-grow: 1;
        height: calc(90dvh - 11rem);
        margin-right: 1rem;
        overflow: hidden auto;
        padding-right: 1rem;
    }
}

.detail__conmtent img {
    display: block;
    margin-block: 1rem;
}

.detail__content :is(ol, ul) {
    list-style: none;
    padding-left: 0;
}

.detail__extra-info {
    background-color: #ede9e6;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
}

    .detail__extra-info a {
        color: #0A4AF8
    }

    .detail__extra-info li {
        margin-bottom: 0.75rem;
        /* indentación francesa */
        text-indent: -1rem;
        margin-left: 1rem;
    }

    .detail__extra-info svg {
        transform: translateY(-0.1rem);
    }

    .detail__extra-info ul {
        list-style: none;
        margin-block: 0.25rem;
        padding-left: 0;
    }

.detail__tool {
    text-align: center;
}

.detail__tool-list {
    display: flex;
    justify-content: space-between;
    line-height: 3rem;
    list-style: none;
    margin-right: 0.5rem; /* Igual que .nav-detail */
    padding-left: 0.5rem;
    /*transform: translateY(-1.2rem);*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1020; /* por encima de la navegación */
}




/** 
 * Main content > Page Detail > Tools > Favorite (.favorite)
 *
 * BEM
 *  favorite
 *      __status
 *      __label
 *          __status-display
 *
 * @markup
    <form class="favorite">
        <input type="hidden">
        <input class="favorite__status" id="[text]" type="checkbox">
        <label for="[.favorite__status#id]" class="favorite__label">
            <svg class="favorite__status-display">
                <path></path>
            </svg>
            <span>[text]</span>
        </label>
    </form>
    ========================================================================== */


/**
 * PBI 2416 (cuando el checkbox oculto recibe el foco mediante TAB)
 */
.actuator__trigger:focus-visible + .favorite__label {
    border-radius: 4px;
    outline: 2px solid;
    outline-offset: 2px;
}



/** 
 * Main content > Page Detail > Related (.related)
 *
 *  PBI 1507
 *
 * BEM
 *  related
 *      __title
 *
 * @markup
    <article class="related">
        <h2 class="related__title">Relacionados</h2>
        [<ul><li>[a]</li>[li]</ul>]
        [<ul><li>[a]</li>[li]</ul>]
    </article>
    ========================================================================== */


.related {
    margin-top: 4.75rem;
}

    .related li {
        margin-bottom: 0.5rem;
    }

    .related ul {
        font: var(--dizo-label-3-font);
        font-variation-settings: var(--dizo-label-3-font-variation-settings);
        font-weight: normal;
        letter-spacing: var(--dizo-label-3-letter-spacing);
        list-style: none;
        padding-left: 0;
    }

        .related ul + ul {
            border-top: 1px solid;
            padding-top: 1rem;
        }

.related__title {
    font: var(--dizo-caption-1-font);
    font-size: 2vw;
    font-variation-settings: var(--dizo-caption-1-font-variation-settings);
    letter-spacing: var(--dizo-caption-1-letter-spacing);
}



/** 
 * Main content > Page Detail > Content > Characters (.characters)
 *
 * BEM
 *  characters
 *      __title
 *
 * @markup
    <article class="characters">
        <h2 class="characters__title">[text]</h2>
        <div class="characters__content">
            <dl>
                <dt>[text]</dt>
                <dd>[text]</dd>
            </dl>
        </div>
    </article>
    ========================================================================== */


.detail__content.characters dd {
    font-style: italic;
    grid-column: 2;
}


/**
 * 1. Bug 1434 (max-content 1fr no es el valor adecuado, porque se desborda ante textos grandes)
 * 2. minmax(10rem, 1fr) para que tenga una anchura mínima
 */
.detail__content.characters dl,
.page--guia_9_guia-uso dl {
    display: grid;
    grid-template-columns: minmax(10rem, max-content) auto; /* 1 y 2 */
    gap: 0 2rem;
}

.detail__content.characters dt,
.page--guia_9_guia-uso dt {
    grid-column: 1;
}

/*.page--guia-uso*/ dl p:only-child,
.detail__author p {
    display: inline;
    margin: 0;
}


/**
 * El último dt ocupa dos columnas si no tiene dd.
 * PBI 1516
 * 1. Si hay un dd vacío el dt también ocupa el doble.
 */
.detail__content.characters dt:has(+ dd:empty), /* 1 */
.detail__content.characters dt:not(:has(+ dd)) {
    grid-column: 1 / span 2;
}


/**
 * Bug 2464 (se ha sacrificado la navegación por teclado por el funcionamiento del desplegable del listado de personajes)
 */
.characters--expandable .expandable__trigger {
    display: none;
}




/** 
 * Main content > Page Detail > Expandable Content (.expandable)
 *
 *  PBI 1451
 *
 * BEM
 *  expandable
 *      __trigger
 *      __actuator
 *
 * @markup
    <article class="expandable">
        <input class="expandable__trigger" id="[text]" type="checkbox" />
        <label class="expandable__actuator" for="[.expandable__trigger#id]">[text]</label>
    </article>
    ========================================================================== */


.expandable {
    max-height: /* 20rem PBI 1467 */ 22.5rem;
}




/** 
 * Main content > Page Detail > Content > Gallery (.gallery)
 *
 *  Bug 1573 (sustitución de masonry)
 *
 * @markup
<!-- Bug 1573 (nueva estructura) -->
<article class="gallery">
    <figure>
        <img />
        <figcaption>[text]</figcaption>
    </figure>
    [figure]
</article>
 *
 * @markup
<!-- Bug 1573 (eliminación de masonry de mdb) -->
    <article class="gallery">
        <div>
            <div class="card">
                <img />
                <div class="card-body">[text]</div>
            </div>
        </div>
        [<div>[card]</div>]
    </article>
    ========================================================================== */


/**
 * 1. Bug 1573
 */
.detail__content.gallery {
    column-count: 1; /* 1 */
    column-gap: 1rem; /* 1 */
    overflow-x: clip;
    padding-top: 2.5rem; /*  hueco para el título de la sección */
}

.gallery--expandable {
    max-height: 3rem;
}

    /**
     * PBI 1808 Task 2385
     * Mantener la flecha arriba cuando se despliega.
     */
    .gallery--expandable .expandable__actuator {
        inset: 1rem 0 auto;
        position: absolute;
    }


    /**
     * Bug 2464 (se ha sacrificado la navegación por teclado por el funcionamiento del desplegable de la galería)
     */
    .gallery--expandable .expandable__trigger {
       display: none;
    }

    /*.gallery--expandable .expandable__actuator,
    .gallery--expandable .expandable__trigger:checked ~ .expandable__actuator {
        bottom: -1rem !important;
    }*/

.gallery__title {
    position: absolute;
    transform: translateY(-2.4rem);
    width: 100%;
}

/**
 * Bug 1573
 * 1. Cambio de masonry.
 * PBI 1571
 * 2. Tamaño del texto como el del cuerpo.
 */
.detail__content.gallery figure {
    display: block; /* 1 */
    font-size: var(--mdb-body-font-size); /* 2 */
    max-width: 100%; /* 1 */
    overflow: hidden; /* 1 */
}

/**
 * 1. Bug 1573
 */
.detail__content.gallery img {
    break-inside: avoid;
    display: grid;
    grid-column: 1;
    grid-row: 1 / -1;
    grid-template-rows: 1fr auto;
    margin: 0;
    margin-bottom: 0.5rem;
}


.lightbox-gallery .lightbox-gallery-caption-wrapper {
    background: rgba(0, 0, 0, 0.75);
    height: auto;
    padding-bottom: 0.5rem;
}


/**
 * 1. Bug 1573
 */
@media (min-width: 768px) {
    .detail__content.gallery {
        column-count: 2;
    }
}

/**
 * 1. Bug 1573
 */
@media (min-width: 1200px) {
    .detail__content.gallery {
        column-count: 3;
    }
}


/**
 * Bug 1436 (añadir animación lenta en hover sobre las imágenes de la galería y reducir el scale )
 */

.detail__content.gallery img {
    transition: transform 250ms linear;
}


    /**
     * 1. Bug 1436 (añadir animación lenta en hover sobre las imágenes de la galería y reducir el scale)
     */
    .detail__content.gallery img:hover {
        box-shadow: 0 2px 15px -3px rgba(var(--mdb-box-shadow-color-rgb), 0.07), 0 10px 20px -2px rgba(var(--mdb-box-shadow-color-rgb), 0.04);
        transform: scale(1.1); /* 1 */
    }


.detail__content.musical-numbers li,
.detail__content.plays li {
    /* indentación francesa */
    text-indent: -1rem;
    margin-left: 1rem;
}

.detail__content.plays li {
    padding-block: 0.25rem;
}




/** 
 * Main content > Page Detail > Favorite Page (.favorite)
 *
 * BEM
 *  favorite
 *      __type
 *
 * @markup
    <form class="favorite">
        <input[ checked] class="favorite__status" id="[text]" type="checkbox" />
        <label for="[.favorite__status#[id]]">
            <svg class="favorite__status-display">[path]</svg>
        </label>
    </form>
    ========================================================================== */


.favorite label {
    cursor: pointer;
}

.favorite__status:not(:checked) ~ label .favorite__status-display {
    fill: transparent;
}

.page--entradas-favoritas .detail__info .detail__content:not(:has(li))::before {
    content: 'No hay voces favoritas.';
}





/** 
 * Main content > Page detail > Navigation (.nav-detail)
 *
 * BEM
 *  nav-detail
 *      __item-list
 *          __item
 *              __item-link
 *
 * @markup
    <nav class="nav-detail">
        <ol class="nav-detail__item-list">
            <li class="nav-detail__item">
                <a class="nav-detail__item-link[ active]" href="#[text]">[text]</a>
            </li>
            [nav-detail__item]
        </ol>
    </nav>
    ========================================================================== */


/**
 * 1. PBI 2419
 */
.nav-detail {
    /*background: #fbfafb;  1 */
    margin-right: 0.5rem; /* Igual que .detail__tool-list */
    max-height: 90dvh;
    overflow-y: auto;
    top: 5dvh;
    z-index: 1; /* 1 */
}

.nav-detail__item {
    padding: 0.5rem;
    position: relative;
    text-align: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.nav-detail__item-link {
    border-bottom-width: 0 !important;
    color: inherit !important;
    display: inline-block;
    line-height: 1.25;
}

    .nav-detail__item-link:is(.active,.is-active)::after {
        background-color: black;
        border-radius: 50%;
        bottom: 50%;
        content: '';
        padding: 0.25rem;
        position: absolute;
        right: 0;
        transform: translate(50%, 50%);
    }


/**
 * PBI 1519 (hueco para la cabecera sticky y control de altura)
 */
@media (min-width: 768px) {

    .nav-detail {
        --top-sticky: 11rem;
        max-height: calc(100dvh - var(--top-sticky) - 5dvh);
        /*top: var(--top-sticky);*/
        z-index: 1019;
    }

    .detail__aside:has(.detail__tool-list) .nav-detail {
        --top-sticky: 15rem;
    }
}





/** 
 * Main content > Page detail > Navigation > Item (.nav-item)
 *
 *  Sin descendientes.
 *
 * @markup
    <li class="nav-detail__item nav-item border-end">
        <a class="nav-detail__item-link nav-link" href="[url]">[text]</a>
    </li>
 *
 *  Con descendientes.
 *
 * BEM
 *  nav-item
 *      __submenu-actuator
 *
 * @markup
    <li class="nav-detail__item nav-item border-end">
        <input class="trigger" id="[text]" type="checkbox">
        <label class="nav-item__submenu-actuator" for="[.trigger#id]">
            <span class="visual-hidden">[text]</span>
        </label>
        <a class="nav-detail__item-link nav-link" href="[url]">[text]</a>
        <ol class="nav-detail__item-list">[nav-item]</ol>
    </li>
    ========================================================================== */


.nav-detail__item-list {
    font-size: 0.9em;
    list-style-type: none;
    margin-right: 0.25rem;
    padding-left: 0;
}

.nav-detail > .nav-detail__item-list {
    position: sticky;
    top: 1rem;
}

.nav-detail__item > input[type="checkbox"] ~ .nav-detail__item-list {
    display: none;
}

.nav-detail__item > input[type="checkbox"]:checked ~ .nav-detail__item-list {
    display: block;
}

.nav-item__submenu-actuator {
    cursor: pointer;
    position: absolute;
    transform: translateX(-1rem) scale(1.5);
}

    .nav-item__submenu-actuator span {
        display: none;
    }

    .nav-item__submenu-actuator::after {
        content: '▾';
    }

/**
     * PBI 2416 (cuando el checkbox oculto recibe el foco mediante TAB)
     */
.nav-detail__item > input[type="checkbox"]:focus-visible ~ .nav-item__submenu-actuator::after {
    border-radius: 4px;
    outline: 2px solid;
    outline-offset: 2px;
}

.nav-detail__item > input[type="checkbox"]:checked ~ .nav-item__submenu-actuator::after {
    content: '▴';
}




/** 
 * Main content > Page Favorites > Favorite (.favorite)
 *
 *  PBI 1373
 *
 * BEM
 *  favorite
 *      __name
 *      __trigger
 *
 * @markup
    <li class="favorite">
        <a class="favorite__name">[text]</a>
        <button class="favorite__trigger" type="button"></button>
    </li>
    ========================================================================== */


li.favorite:hover {
    background-color: var(--dizo-color-alabaster);
    background-filter: blur(1rem);
    border: 1px solid var(--dizo-color-cool-grey-200) !important;
    box-shadow: var(--mdb-dropdown-box-shadow);
}

.favorite__trigger {
    display: none;
}

.favorite:hover .favorite__trigger {
    display: block;
}




/** 
 * Main content > Page Register (.row--sign-up)
 *
 * BEM
 *  row--sign-up
 *
 * @markup
    <div class="row--sign-up">
        <div class="main-card">
            <h1 class="main-card__header">[text]</h1>
            <div class="main-card__card">[card]</div>
        </div>
    </div>
 *
 * @markup
     <div class="card">
        <form class="card-body form row">
            <div class="form__selection">
                <ul class="list-group">
                    <li>
                        <label>
                            <input checked="" class="visually-hidden" disabled="" type="checkbox" />
                            <ul class="list-group selection-description">
                                <li>[text]</li>
                            </ul>
                        </label>
                    </li>
                    <li>
                        <label>
                            <input class="visually-hidden" name="professional" type="checkbox" value="true" />
                            <div class="selection-description">
                                <h2>[text]</h2>
                                <ul class="list-group">
                                    <li>[text]</li>
                                </ul>
                            </div>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="form__data">[btn-secondary|form-outline]</div>
        </form>
    </div>
    ========================================================================== */


.main-card__card {
    --mdb-border-radius: 1rem;
}


/**
 * 1. La altura es el doble de `.row--sign-up li`.
 */
.row--sign-up label:has(input) {
    align-items: center;
    background-color: var(--dizo-color-alabaster);
    display: flex;
    padding: 0.5rem 1rem; /* 1 */
}

.row--sign-up label:has(:checked) {
    background-color: var(--dizo-color-bluewood);
    color: var(--mdb-white);
}

    .row--sign-up label:has(:checked)::after {
        content: '';
        border-style: solid;
        border-width: 0 0 1rem 1rem;
        padding: 1rem 2rem;
        transform: rotate(-45deg);
    }

.row--sign-up label:has(input:not(:disabled)) {
    cursor: pointer;
}

/**
 * La altura es la mitad de `.row--sign-up label:has(input)`.
 */
.row--sign-up li {
    padding: 0.25rem 0;
}

.row--sign-up ul {
    list-style: none;
    text-align: left;
}

.selection-description {
    flex-grow: 1;
}

/**
 * PBI 1808	Task 1813
 */
.row--sign-up .form__selection {
    display: grid;
}


    /**
     * PBI 1808	Task 1813
     */
    .row--sign-up .form__selection label,
    .row--sign-up .form__selection > ul > li {
        height: 100%;
    }




/** 
 * Main content > Limited content (.container--[modifier])
 *
 * @markup
    <div class="container--[narrow|two-columns]">[text]</div>
    ========================================================================== */


:is(.container--narrow,.container--two-columns) .main-card__header {
    font: var(--dizo-heading-4-font);
    letter-spacing: var(--dizo-heading-4-letter-spacing);
    margin-bottom: 2rem;
    margin-top: 1rem;
}

@media (min-width: 576px) {
    .container--404 {
        background: no-repeat url('/img/page-not-found.png');
        background-position-y: 3rem;
        background-size: 35%;
        min-height: 20rem;
    }

        .container--404 .container--404__text {
            font-size: 1.25rem;
            margin-left: 35%;
        }
}

.container--narrow {
    max-width: 75ch;
}

.container--two-columns {
    max-width: 85ch;
}




/** 
 * Main content > Page Searcher (.main-content)
 *
 * @markup
    <main class="main-content">
        <div>[a]</div>
        <form class="container--[account|search-arias|search-performances]">
            <div>
                <h1 class="page-title">[text]</h1>
            </div>
            <nav class="nav">[nav-bar]</nav>
            <div class="tab-content">[tab-pane]</div>
            <button class="searcher__trigger">[text]</button>
        </form>
    </main>
    ========================================================================== */


.container--account,
.container--search-arias,
.container--search-performances {
    max-width: 720px !important;
}

.page-title {
    font: var(--dizo-heading-2-font);
    font-size: 2.5rem; /* PBI 1570 */
    letter-spacing: var(--dizo-heading-2-letter-spacing);
    padding-bottom: 1rem;
}




/** 
 * Main content > Page List > Results (.results)
 *
 * BEM
 *  results
 *      __global-searcher
 *      __header
 *          __total
 *          __configuration
 *
 * @markup
    <section class="results">
        <form class="results__global-searcher">[searcher]</form>
        <div class="results__header">
            <p class="results__total">[text]</p>
            <div class="results__configuration">[text]</div>
    </section>
    ========================================================================== */


.results__total {
    font: var(--dizo-caption-1-font);
    font-size: 0.775rem;
    font-variation-settings: var(--dizo-caption-1-font-variation-settings);
    letter-spacing: var(--dizo-caption-1-letter-spacing);
    margin-bottom: 0;
}




/** 
 * Main content > Page List > Results > Global search (.results__global-searcher)
 *
 * BEM
 *  searcher--global
 *      __global-searcher
 *      __header
 *          __total
 *          __configuration
 *
 * @markup
    <form class="searcher--global">
        <input class="searcher__input">
        <button class="searcher__trigger">[searcher__trigger-loupe]</button>
        <div class="select-wrapper">
            <div class="form-outline" data-mdb-input-init="" data-mdb-input-initialized="true">
                <input class="form-control select-input placeholder-active" type="text" role="listbox" aria-multiselectable="true" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true">
                <span class="select-arrow"></span>
                <div class="form-notch">
                    <div class="form-notch-leading" style="width: 9px;"></div>
                    <div class="form-notch-middle" style="width: 0px;"></div>
                    <div class="form-notch-trailing"></div>
                </div>
            </div>
            <select class="searcher__input">
                <option value="[text]">[text]</option>
            </select>
        </div>
    </form>
    ========================================================================== */


.header-searcher {
    margin: 1rem 0;
}

    .header-searcher nav label[for="filtro-secciones"],
    .header-searcher nav span {
        display: none !important;
    }

    .header-searcher nav svg {
        height: 2rem;
        width: 1.5rem;
    }

    .header-searcher nav label[for="filtro-secciones"] {
        color: rgb(var(--mdb-link-color-rgb));
        cursor: pointer;
        display: block !important;
        height: 2.3rem;
        justify-content: center;
        margin-left: .5rem;
        min-width: 2rem;
    }

        .header-searcher nav label[for="filtro-secciones"]:not(:hover) {
            --mdb-link-color-rgb: 59, 59, 59;
        }

    .header-searcher nav label svg {
        margin-top: .2rem;
    }

    .header-searcher .input-group {
        border-bottom-right-radius: 0.3rem !important;
        border-top-right-radius: 0.3rem !important;
    }

.header-searcher__voices {
    justify-content: center;
    min-width: 2rem;
}

    .header-searcher__voices svg {
        height: 1rem !important;
        width: 1.5rem;
    }

.header-searcher > .trigger:not(:checked) ~ .input-group,
.header-searcher > .trigger:not(:checked) ~ .input-group .form-control {
    border-bottom-left-radius: 0.3rem !important;
    border-top-left-radius: 0.3rem !important;
}

@media (min-width: 1200px) /* lg */ {
    .header-searcher {
        margin-inline: auto;
        max-width: 50%;
    }
}

.header-searcher__index {
    display: none !important;
}

@media (min-width: 768px) {
    /**
     * Hueco para el enlace que lleva al índice.
     * PBI 2427	Task 2440 (se estrecha porque los logos ocupan más espacio)
     */
    .header__main {
        --width-index-anchor: /*5ch*/ /*2.75ch*/ 0px;
    }

        .header__main > nav {
            margin-left: calc(var(--width-index-anchor) /2);
        }

    .header-searcher {
        margin-right: var(--width-index-anchor);
        width: calc(100% - var(--width-index-anchor));
    }
}

.header-searcher.searcher .select-wrapper,
.header-searcher.searcher .select-wrapper .form-notch-leading {
    border-radius: 0.25rem 0 0 0.25rem !important;
}

.results__global-searcher .form-control {
    font-weight: normal !important;
    padding-right: 2rem;
}

.header-searcher.searcher .select-wrapper .form-outline {
    padding-block: .18rem;
}

.results__global-searcher :is(.form-control, .form-outline, .select-input placeholder-active, .select-option-text) {
    min-height: calc(1.66rem + 2px);
    height: calc(1.66rem + 2px);
    font-size: .775rem;
    padding-block: 0;
}

@media (width < 576px) {
    .header-searcher {
        display: grid;
        grid-gap: 0.25rem;
    }
}



/** 
 * Main content > Page List > Results > Item voice (.row--voice)
 *
 * BEM
 *  row--voice
 *      __thumbnail
 *      __info
 *          __title
 *              __title-link
 *          __composer
 *          __poets
 *          __dramma
 *          __year
 *
 * @markup
    <a class="results__item" href="[url]>
        <article class="row--voice">
            <div class="row--voice__thumbnail">
                [<img class="row--voice__thumbnail-image" src="[url]" />]
            </div>
            <div class="row--voice__info">
                <h2 class="row--voice__title">[text]</h2>
                <p class="row--voice__composer">
                    <strong class="row--voice__composer_name">[text]</strong>
                    [text]
                </p>
                <p class="row--voice__poets">[text]</p>
                <p class="row--voice__dramma">[text]</p>
                <p class="row--voice__year">[text]</p>
            </div>
        </article>
    </a>
    ========================================================================== */


.results__item {
    text-decoration: none !important;
}

.row--voice {
    cursor: pointer;
}

    .row--voice:hover {
        background-color: var(--dizo-color-swiss-coffee);
    }

.row--voice__content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.row--voice__info {
    color: var(--dizo-color-warm-grey-800);
    font: var(--dizo-body-font);
    letter-spacing: var(--dizo-body-letter-spacing);
}

.row--voice__thumbnail {
    aspect-ratio: 16/9;
    display: block;
    overflow: hidden;
    position: relative;
    transition: 500ms transform;
}

    /* PBI 1145 (cambio de #rs-viewer a #didone-rs-viewer) */
    .row--voice__thumbnail::before {
        background: no-repeat center url(/svg/logos/didone-logo.svg);
        background-size: 80%;
        content: '';
        inset: 0;
        opacity: 0.05;
        position: absolute;
        z-index: 0;
    }

.row--voice__thumbnail-image {
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.row--voice__title {
    --mdb-heading-color: rgb(10, 80, 180);
    font: var(--dizo-heading-6-font);
    letter-spacing: var(--dizo-heading-6-letter-spacing);
}

    .row--voice__title strong {
        font-size: smaller;
    }




/** 
 * Main content > Page List > Results > Item Performance (.row--voice)
 *
 * BEM
 *  row--voice
 *      __thumbnail
 *      __info
 *          __type
 *          __title
 *              __title-link
 *          __composer
 *          __poets
 *          __dramma
 *          __year
 *
 * @markup
    <a class="results__item">
        <article class="row--voice">
            <div class="row--voice__info">
                <p>
                    <span class="row--voice__type">[text]</span>
                    <span class="row---voice__author">[text]</span>
                </p>
                <h2 class="row--voice__title">
                    <strong>[text]</strong>
                </h2>
                <ul class="row--voice__items">
                    [<li>
                        <strong>[text]</strong>:
                        [text]
                    </li>]
                </ul>
                <p>[text]</p>
                <p class="row--voice__year">[text]</p>
            </div>
        </article>
    </a>
    ========================================================================== */


/**
 * 1. PBI 2416 (aumento de contraste)
 */
.row--voice__author,
.row--voice__type {
    color: /*var(--dizo-color-azur)*/
    var(--dizo-color-licore) /* 1 */;
    font-size: 0.75rem;
}

.row--voice__dramma,
.row--voice__type,
.row--voice__year {
    text-transform: capitalize;
}

.row--voice__info p {
    max-width: 100%;
}

    .row--voice__info p:has(.row--voice__type) {
        gap: 1rem;
    }

.row--voice__items {
    list-style: none;
    padding-left: 0;
}

    .row--voice__items > li {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }




/** 
 * Modal (.modal)
 *
 *
 * @markup
    <div class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">[text]</h3>
                    <button class="btn-close"></button>
                </div>
                <div class="modal-body">[text]</div>
                <div class="modal-footer">[button]</div>
            </div>
        </div>
    </div>
    ========================================================================== */


.modal-content {
    --mdb-modal-border-radius: 0;
}

.modal-header {
    --mdb-modal-inner-border-radius: 0;
}

.modal-title {
    font: var(--dizo-heading-4-font);
    letter-spacing: var(--dizo-heading-4-letter-spacing);
}

.modal-footer .btn-outline-secondary {
    border-bottom: var(--mdb-btn-border-width) solid currentColor;
}




/** 
 * Pagination
 *
 * BEM
 *  pagination
 *      __pages
 *          __page
 *              __page-current
 *              __page-link
 *
 * @markup
    <nav class="pagination">
        <ol class="pagination__pages">
            [<li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>
            <li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>]
            [<li class="pagination__page">[text]</li>]
            <li class="pagination__page">
                [<span aria-current="page" class="pagination__page-current">[number]</span>]
                [<a class="pagination__page-link" href="[url]">[number]</a>]
            </li>
            [<li class="pagination__page">[text]</li>]
            [<li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>
            <li class="pagination__page">
                <a class="pagination__page-link navigation-link"></a>
            </li>]
        </ol>
    </nav>
    ========================================================================== */


.pagination {
    list-style: none;
    padding-left: 0;
}

    /**
     * La paginación se oculta si sólo hay una página.
     */
    .pagination:has(.pagination__page:only-child) {
        display: none !important;
    }

.pagination__page {
    align-items: center;
    display: inline-flex;
    font: var(--dizo-caption-1-font);
    letter-spacing: var(--dizo-caption-1-font-variation-settings);
}

.pagination__page-current,
.pagination__page-link {
    cursor: pointer;
    text-decoration: none;
}

.pagination__page:nth-child(-n+2) .navigation-link {
    transform: rotateZ(-135deg);
    transform-origin: 35% 35%; /* PBI 1522 */
}

.pagination__page:nth-last-child(-n+2) .navigation-link {
    border-width: 0;
    transform: rotateZ(45deg);
    transform-origin: 33% 125%; /* PBI 1522 */
}


/**
 * Bug 1498 Se ocultan las dos primeras páginas tras los `...` iniciales.
  *
 * @markup
    <li class="pagination__page">
        <a class="pagination__page-link navigation-link"><!--Anterior--></a>
    </li>
    [<li class="pagination__page">[text]</li>]
    <li class="pagination__page">[pagination__page-link]</li><!--Se oculta-->
    <li class="pagination__page">[pagination__page-link]</li><!--Se oculta-->
*/
@media (max-width: 575px) {
    .pagination__page:has(.navigation-link) + .pagination__page:not(:has(.pagination__page-link)) + .pagination__page:has(.pagination__page-link),
    .pagination__page:has(.navigation-link) + .pagination__page:not(:has(.pagination__page-link)) + .pagination__page:has(.pagination__page-link) + .pagination__page:has(.pagination__page-link) {
        display: none;
    }
}

.pagination__page-link.navigation-link {
    border: none;
    display: block;
    height: 0.5rem;
    max-width: 0.5rem;
    position: relative;
}

.pagination__page .navigation-link::after,
.pagination__page:is(:first-child, :last-child) .navigation-link::before {
    border-style: solid;
    border-width: 0.1rem 0.1rem 0 0;
    content: '';
    display: block;
    padding: 0.2rem;
    position: absolute;
}

.pagination__page:is(:first-child, :last-child) .pagination__page-link.navigation-link::before {
    transform: translate(-0.15rem, 0.15rem);
}

/**
 * 1. Bug 1498 Cambio de `width` a `min-width` para no limitar el crecimiento cuando hay valores de 3 dígitos.
 */
.pagination__page > * {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-width: 1.25rem; /* 1 */
}

.pagination__page-current {
    border: solid currentColor !important;
    border-width: 0.1rem 0 !important;
    color: var(--dizo-color-warm-grey-800);
    margin-top: -0.1rem;
}

.pagination__pages {
    gap: 0.25rem;
    justify-content: space-evenly;
    max-width: 27rem;
}




/** 
 * Main content > Page Detail (.detail)
 *
 * BEM
 *  detail
 *      __type
 *          __score
 *              __image
 *              __score-label
 *                  __score-img
 *      __info
 *          __title
 *          __year
 *          __section
 *              __performance-list
 *
 * @markup
    <div class="detail">
        <div>
            <div>
                <a class="no-external">[text]</a>
            </div>
            <div class="detail__type">[text]</div>
        </div>
        <div>
            <div>
                <a class="detail__score">
                    <img class="detail__image">
                    <span class="detail__score-label">
                        <img class="detail__score-image" />
                        [text]
                    </span>
                </a>
            </div>
            <div class="detail__info">
                <h1 class="detail__title">[text]</h1>
                [<!-- Only Aria -->
                <p class="detail__year">[text]</p>
                ]
                [<!-- Only Aria -->
                <div class="passions-valence">[passion|valence]</div>
                ]
                <ul>
                    [<li>[text]</li>]
                    [<li>
                        <dl>
                            <dt class="detail__label[--highlight]">[text]</dt>
                            [<dd class="detail__composer">[composer]</dd>]
                        </dl>
                    </li>]
                    [<li>
                        <h2 class="detail__section">[text]</h2>
                        [<ol class="detail__performance-list">[li]</ol>]
                    </li>]
                </ul>
            </div>
        </div>
    </div>
    ========================================================================== */


/**
 * 1. PBI 1518
 * 2. PBI 1570
 */
.detail :where(h2,h3,h4,h5,h6) {
    --font-size: 1.75rem; /* 2 */
    font: var(--dizo-heading-4-font); /* 1 */
    font-size: var(--font-size);
    font-weight: /* 400 1 */ /* 300 2 */ bold;
    letter-spacing: var(--dizo-heading-4-letter-spacing); /* 1 */
    line-height: 1.2;
}

.detail h3 {
    --font-size: 1.5rem;
}

.detail h4 {
    --font-size: 1.3rem;
}

.detail h5 {
    --font-size: 1.2rem;
}

.detail h6 {
    --font-size: 1.15rem; /*  Tamaño estándar */
}

.detail__author {
    font: var(--dizo-heading-6-font);
    letter-spacing: var(--dizo-heading-6-letter-spacing);
}


/**
 * 1. Bug 1572 
 */
.detail__content,
.detail__extra-info {
    margin-block: 1rem;
    clear: both; /* 1 */
}

.detail__content-subtitle {
    font-size: 1.5rem;
}

.page--acerca-de_4_diccionario .detail__info ol {
    column-count: 2;
    list-style: none;
    padding-left: 0;
}




/**
 * PBI 1526
 * 1. A la derecha del párrafo.
 * 2. Texto alrededor.
 * 3. Ocupar 1/3 del ancho del texto.
 * PBI 1571
 * 4. Tamaño del texto como el del cuerpo.
 */
.detail__image {
    clear: both; /* 1 */
    display: block; /* 2 */
    /*font: var(--dizo-caption-2-font);
    font-size: var(--mdb-body-font-size);*/ /* 4 */
    font-weight: 500;
    line-height: 1.25;
}

.detail__image--end:not(.detail__image--landscape),
.detail__image--start:not(.detail__image--landscape) {
    width: max(30%, 10rem);
}


/**
 * PBI 1697
 * A la derecha del párrafo.
 */
.detail__image--end {
    float: right;
    margin: 0.5rem 0 0.5rem 1rem;
}


/**
 * PBI 1697
 * Al centro del párrafo.
 */
.detail__image--full-width {
    margin-block: 0.5rem;
}


/**
 * PBI 1697
 * A la izquierda del párrafo.
 */
.detail__image--start {
    float: left;
    margin: 0.5rem 1rem 0.5rem 0;
}


/**
 * PBI 1605
 * Las imágenes apaisadas del texto son más anchas.
 * PBI 1697
 * las imágenes centradas ocupan toda la anchura
 */
.detail__image--landscape:not(.detail__image--full-width) {
    width: min(100%, 30rem);
}

.lightbox .detail__image {
    cursor: zoom-in;
}

.detail__image figcaption {
    font-size: 0.938rem;
    line-height: 1.25rem;
    padding-top: 0.5rem;
}

.detail__info a {
    color: var(--dizo-color-dusty);
}

.detail__info :is(dd, dt) {
    --mdb-list-group-color: var(--dizo-color-warm-grey-800);
    margin-bottom: 0.25rem;
}

.detail__info dd:has(b) {
    grid-column: 1 / 3;
}

.detail__label {
    font: var(--dizo-label-font);
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-label-letter-spacing);
}

.detail__label--highlight {
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-variant: small-caps;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 20px;
    text-transform: uppercase;
}

.detail__performance-list {
    list-style: none;
    padding-left: 0;
}

.detail__publication-time {
    font-size: 0.75rem;
    line-height: 1;
}

    .detail__publication-time dd {
        grid-column: 2 / 3;
    }

    .detail__publication-time dl {
        display: grid;
        gap: 0 0.25rem;
        grid-template-columns: max-content 1fr;
    }

    .detail__publication-time dt {
        grid-column: 1 / 2;
        white-space: nowrap;
    }

.detail__score {
    display: block;
    position: relative;
}

.detail__score-image {
    max-height: 1em;
    transform: translateY(-1px);
}

.detail__score-label {
    bottom: 0.5rem;
    left: 0.5rem;
    position: absolute;
}

.detail__section {
    font: var(--dizo-subheading-1-font);
    letter-spacing: var(--dizo-subheading-1-letter-spacing);
}

    .detail__section ~ .detail__label {
        font: var(--dizo-label-2-font);
        font-variation-settings: var(--dizo-label-2-font-variation-settings);
        letter-spacing: var(--dizo-label-2-letter-spacing);
    }

.detail__title {
    color: var(--dizo-color-gondola);
}

.detail__type {
    color: var(--dizo-color-gondola);
    font: var(--dizo-subheading-1-font);
    letter-spacing: var(--dizo-subheading-1-letter-spacing);
}

.detail__year {
    font: var(--dizo-label-font);
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-label-letter-spacing);
}

.detail dt {
    font-weight: normal;
}




/**
 * Main content > Page Detail Obra > Participantes  (.participants)
 *
 * BEM 
 *  participants
 *      __title
 *      __content
 *
 * @markup
    <article class="participants">
        <h2 class="participants__title">[text]</h2>
        <dl class="participants__content">[text]</dl>
    </article>
    ========================================================================== */


.participants__content {
    background-color: #ddd;
    border-radius: 0.25rem;
    display: grid;
    gap: 0 1rem;
    grid-template-columns: max-content 1fr;
    padding: 1rem;
}




/**
 * Main content > Page Index  (.index)
 *
 * BEM 
 *  index
 *      __title
 *      __nav
 *          __item
 *              __link
 *      __carrousel
 *
 * @markup
    <article class="index">
        <h1 class="index__title">[text]</h1>
        <ol class="index__nav">
            <li class="index__item">
                <a class="index__link[ active]" data-letter>[text]</a>
            </li>
            [index__item]
        </ol>
        <p class="index__account">[text]</p>
        <div class="index__carrousel">[index-carrousel]</div>
    </article>
    ========================================================================== */


/**
 * PBI 1480 (se  visualiza  siempre toda la letra)
 */
.container.index {
    min-height: 28rem;
}


/**
 * PBI 1406	Task 1419
 * 1. alineado horizontalmente con la primera columna de resultados
 */
.index__account {
    font: var(--dizo-text-1-font);
    letter-spacing: var(--dizo-text-1-letter-spacing);
    padding: 1rem 0 0 2.9rem /* 1 */;
}

.index__link {
    display: flex;
    justify-content: center;
    padding: 0.25rem;
    transition: 250ms background-color;
    width: 1.5rem !important;
}
    /**
     * 1. Contrarresta la bajada que causa el borde.
     */
    .index__link.is-active {
        border: solid currentColor !important;
        border-width: 0.1rem 0 !important;
        color: var(--dizo-color-warm-grey-800);
        margin-top: -0.1rem; /* 1 */
    }

        .index__link.is-active::before {
            color: var(--dizo-color-licorice);
            content: attr(data-letter);
            font-size: 80dvh;
            font-weight: 500;
            left: 0;
            opacity: 0.1;
            position: absolute;
            transform: translate(-50%, 25dvh);
            z-index: -1;
        }

.index__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style: none;
    margin-top: 1rem;
    padding-inline: 0.5rem;
    position: relative;
}




/**
 * Main content > Page Index > Carrusel  (.index-carrousel)
 *
 * BEM 
 *  index-carrousel
 *      __nav--[disabled|first|prev]
 *      __voice-list
 *          __voice
 *              __link
 *      __nav--[disabled|last|next]
 *
 * @markup
    <div class="index__carrousel index-carrousel">
        <a class="index-carrousel__nav--first[ index-carrousel__nav--disabled]">
            <span>[text]</span>
        </a>
        <a class="index-carrousel__nav--prev[ index-carrousel__nav--disabled]">
            <span>[text]</span>
        </a>
        <ol class="index-carrousel__voice-list">
            <li class="index-carrousel__voice">
                <a class="index-carrousel__link">[text]</a>
            </li>
            [index-carrousel__voice]
        </ol>
        <a class="index-carrousel__nav--next[ index-carrousel__nav--disabled]">
            <span>[text]</span>
        </a>
        <a class="index-carrousel__nav--last[ index-carrousel__nav--disabled]">
            <span>[text]</span>
        </a>
    </div>
    ========================================================================== */


.index-carrousel {
    position: relative;
}

.index-carrousel__link {
    border-bottom-width: 0;
    cursor: pointer;
    font: var(--dizo-label-font);
    font-size: inherit;
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-label-letter-spacing);
    padding-inline: 0.1rem;
    transition: 250ms background-color;
}

    .index-carrousel__link:not(:hover) {
        --dizo-color-accent-color: var(--dizo-color-warm-grey-800);
    }

/**
 * PBI 1480 
 * 1. altura de las flechas fija.
 */
.index-carrousel__nav {
    border-bottom: none !important;
    display: flex;
    inset-block: 0;
    justify-content: center;
    min-width: 2rem;
    padding-top: 15dvh; /* 1 */
    position: absolute;
}

    .index-carrousel__nav span, .index-carrousel__nav--disabled {
        display: none;
    }

    .index-carrousel__nav::before, .index-carrousel__nav--first::after, .index-carrousel__nav--last::after {
        border-style: solid;
        border-width: 0.2rem 0.2rem 0 0;
        content: '';
        display: block;
        height: 1rem;
        width: 1rem;
    }

.index-carrousel__nav--first::after {
    transform: rotateZ(-135deg);
}

.index-carrousel__nav--last::after {
    transform: translateX(-0.6rem) rotateZ(45deg);
}

.index-carrousel__nav--last {
    right: -1.25rem; /* PBI 1522 */
}

.index-carrousel__nav--next {
    right: 0.75rem; /* PBI 1522 */
}

    .index-carrousel__nav--last::before, .index-carrousel__nav--next::before {
        transform: rotateZ(45deg)
    }

.index-carrousel__nav--first {
    left: -1.25rem; /* PBI 1522 */
}

.index-carrousel__nav--prev {
    justify-content: space-between; /* PBI 1522 */
    left: 0.75rem; /* PBI 1522 */
}

    .index-carrousel__nav--first::before, .index-carrousel__nav--prev::before {
        transform: translateX(0.55em) rotateZ(-135deg);
    }

.index-carrousel__voice {
    margin-bottom: 0.5rem;
}

.index-carrousel__voice-list {
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding-inline: 2rem;
}

@media (min-width: 768px) {
    .index-carrousel__voice-list {
        column-count: 3;
    }
}




/** 
 * Main content > Accordion (.accordion)
 *
 * @markup
    <div class="accordion">
        <div class="accordion-item">
            <h2 class="accordion-header" id="[id]">
                <button class="accordion-button[ collapsed]" data-bs-target="#[.accordion-collapse#id]" aria-controls="[.accordion-collapse#id]">
                    [text]
                </button>
            </h2>
            <div class="accordion-collapse" id="[id]" aria-labelledby="[.accordion-header#id]">
                [text]
            </div>
        </div>
        [accordion-item]
    </div>
    ========================================================================== */


.accordion {
    --mdb-accordion-btn-bg: transparent;
}

.accordion-button, .accordion-button:not(.collapsed) {
    padding: 0.5rem 0;
}

.accordion-button {
    --mdb-accordion-btn-color: var(--dizo-color-licorice);
    font: var(--dizo-button-font);
    font-variation-settings: var(--dizo-button-font-variation-settings);
    letter-spacing: var(--dizo-button-letter-spacing);
}

    .accordion-button:not(.collapsed) {
        --mdb-accordion-active-color: var(--dizo-color-licorice);
        background-color: inherit;
    }
        /**
         * Imagen en negro del botón.
         */
        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
        }

.accordion-header {
    border-top: 1px solid;
}

.accordion-item {
    /* --mdb-accordion-bg: transparent;
    --mdb-accordion-flush-border-bottom: none;*/
    background-color: transparent;
    border: none;
    color: inherit;
}




/** 
 * Facets
 *
 * @markup
    <form class="facets">
        <div class="facets__header">
            <button class="facets__trigger" type="button">[text]</button>
            <button class="facets__clear" type="reset">[text]</button>
        </div>
        <div class="facets__content">
            <article>
                <h2>[text]</h2>
                <section>
                    <h3 class="facets__group-title[--[modifier]]">[text]</h3>
                    [facet]
                </section>
            </article>
        </div>
    </form>
    ========================================================================== */


.facets__clear {
    --mdb-btn-color: var(--dizo-color-warm-grey-800);
    border-color: var(--dizo-color-accent-color);
    font-weight: 500;
}

.facets__trigger.searcher__trigger.btn-primary {
    color: var(--dizo-color-warm-grey-800) !important;
}

.facets__group-title + .facet {
    margin-top: 0.5rem;
}

.facets__header button {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.facet--range_start, .multi-range[data-labels] .multi-range__value_start {
    display: inline-block;
    min-width: 2rem;
}




/** 
 * Facets > Facet
 *
 * @markup
    <article class="facet">
        <h3 class="facet__title">[text]</h3>
        [text]
    </article>
    ========================================================================== */


.facet:first-child,
.facets__group-title:first-child {
    margin-top: 0;
}

.facet {
    padding-block-end: 1rem;
}

.facet--score-enabled {
    right: 0;
}

    .facet--score-enabled .facet-check__input {
        border-radius: 0.4375rem !important;
    }


/**
 * 1. Todos los títulos de facet tienen borde superior, excepto el primero de su categoría.
 * 2. PBI 1569 (separación del borde)
 */
.facet:nth-child(n+2) .facet__title {
    border-top: 1px solid; /* 1 */
    padding-top: 0.75rem; /* 2 */
}

.facet__title {
    color: var(--dizo-color-warm-grey-800);
    font: var(--dizo-label-font);
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-label-letter-spacing);
}




/** 
 * Facet > Check
 *
 * BEM
 *   facet-check    (.form-check)
 *      __input     (.form-check-input)
 *      __label     (.form-check-label)
 *
 * @markup
    <li>
        <div class="facet-check">
            <input class="facet-check__input" id="[text]" type="checkbox" />
            <label class="facet-check__label" for="[facet-check__input#id]">[text]</label>
        </div>
        <span class="badge">[text]</span>
    </li>
    ========================================================================== */


li:has(.facet-check) {
    padding-block: 0.2rem;
    padding-inline: 0.3rem 0.25rem;
}

li:has(.facet-check:hover) {
    background-color: var(--dizo-color-swiss-coffee);
    border-radius: 0.25rem;
}

.facet-check, .facet-check + .badge {
    align-items: center;
    color: #413e3f !important;
    display: flex;
    font: var(--dizo-label-font);
    font-size: 0.875rem;
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-label-letter-spacing);
    line-height: 1rem;
}

.form-check-input {
    --mdb-list-group-color: var(--sb-bg-color);
    border-radius: 0 !important;
    padding: 1px 1.5px;
}

    .form-check-input:checked {
        border-color: var(--dizo-color-deep-ocean);
    }


    /**
     * Simula .bg-dark de Bootstrap, pero sólo cuando está :checked. 
     */
    .form-check-input[type=checkbox]:checked, .form-check-input[type=checkbox]:checked:focus {
        --bs-bg-opacity: 1;
        background-color: transparent; /*var(--dizo-color-bluewood);*/
    }

        .form-check-input[type=checkbox]:checked:after {
            border-color: currentColor;
        }




/** 
 * Facets > Facet > Range    (.range)
 *
 * @markup
    <div class="range"[ data-labels]>
        <p class="range__value">
            <span class="range__value_start[ range__value_input]">[text]</span>
            -
            <span class="range__value_end[ range__value_input]">[text]</span>
        </p>
        <input type="range" class="form-range range__slider" min="[number]" max="[number]" value="[number]" step="[number]">
        <span class="thumb">
            <span class="thumb-value">[text]</span>
        </span>
    </div>
    ========================================================================== */


.range {
    --mdb-range-thumb-background: var(--mdb-black);
    --mdb-datepicker-toggle-focus-color: green;
}




/** 
 * Facets > Facet > Range    (.facet--range)
 *
 * @markup
    <article class="facet--range">
        <h3 class="facet__title">[title]</h3>
        <p class="facet--range__display">
            [<span class="facet--range__display_value">[text]</span>]
            [facet--range__display_value]
        </p>
        <div class="facet--range__slider">[slider-range]</div>
        <p class="facet--range__limits">[text]</p>
    </article>
    ========================================================================== */


.facet--range__display {
    font: var(--dizo-label-font);
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-letter-spacing-font);
}

.facet--range__display_value:nth-child(n+2)::before {
    content: ' - ';
}

.facet--range__limits {
    color: var(--bs-gray);
    font-size: 0.75rem;
    margin-top: 0.5rem;
}




/** 
 * Slider (jQuery UI)   (.slider-range)
 *
 * @markup
    <div class="slider-range ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <div class="ui-slider-range ui-widget-header ui-corner-all"></div>
        [<span class="ui-slider-handle ui-state-default ui-corner-all"></span>]
    </div>
    ========================================================================== */


.slider-range {
    background-color: var(--mdb-border-color);
    max-height: 0.2rem;
}

.ui-slider-range {
    background-color: var(--sb-bg-color);
}

.ui-slider .ui-slider-handle.ui-state-default {
    background-color: currentColor;
    border-color: currentColor;
    border-radius: 50%;
    color: var(--sb-bg-color);
    cursor: grab;
    font-size: 0.75rem;
    margin-top: -0.1rem
}

/**
 * `.ui-state-active` debe estar después de `.ui-state-default`.
 */
.ui-slider .ui-slider-handle.ui-state-active {
    cursor: grabbing;
}




/** 
 * Form
 *
 * @markup
    ========================================================================== */


.field-validation-error {
    color: var(--dizo-color-danger);
    display: block;
    font-size: 0.8rem;
    text-align: left;
}




/** 
 * Form control
 *
 * @markup
    <input class="form-control[--modifier]" />
    [<div class="invalid-feedback">[text]</div>]
    ========================================================================== */


.form-control {
    --mdb-border-radius: 0;
    --mdb-surface-color: var(--dizo-color-gondola);
}

.form-control--year {
    width: 8.8rem;
}

.invalid-feedback {
    position: static;
}




/** 
 * Form select wrapper  (.select-wrapper)
 *
 * @markup
    <div class="select-wrapper">
        <div class="form-outline">
            <input class="form-control select-input" type="text" role="combobox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true">
                <span class="select-arrow"></span>
                <div class="form-notch">
                    <div class="form-notch-leading"></div>
                    <div class="form-notch-middle"></div>
                    <div class="form-notch-trailing"></div>
                </div>
                <div class="form-label select-fake-value">[text]</div>
        </div>
        <select class="form-select select select-initialized" data-mdb-filter="true">
            [option]
        </select>
    </div>
    ========================================================================== */


.form-outline {
    background-color: var(--mdb-body-bg);
}
    /**
     * .select-fake-value
     */
    .form-outline .form-control:not(.is-active) ~ .form-label {
        width: 100%;
    }

    .form-outline .form-control:focus ~ .form-label {
        width: max-content;
    }

    /**
     * .form-notch div
     */
    .form-outline .form-control ~ .form-notch div {
        border-color: var(--mdb-border-color);
    }

.select-arrow {
    background: no-repeat right url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234f4f4f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-color: #fff;
    background-position: center;
    background-size: 0.8rem;
    bottom: 0.25rem;
    right: 0 /*12px*/;
    top: 0.25rem;
    width: 2rem /*1rem*/;
}

    .select-arrow::after {
        visibility: hidden;
    }




/** 
 * Form select wrapper > Container  (.select-dropdown-container)
 *
 * @markup
    <div class="select-dropdown-container">
        <div tabindex="0" class="select-dropdown open">
            <div class="input-group">
                <input class="form-control select-filter-input" role="searchbox" type="text">
            </div>
            <div class="select-options-wrapper" style="max-height: 190px;">
                <div class="select-options-list">
                    <div class="select-option[ select-all-option][ selected]" role="option" aria-selected="true" style="height: 38px;">
                        <span class="select-option-text">
                            <input type="checkbox" class="form-check-input" checked="true">
                            [text]
                        </span>
                    </div>
                    <div class="select-option selected" data-mdb-id="option-386507" role="option" aria-selected="true" aria-disabled="false" style="height: 38px;">
                        <span class="select-option-text">
                            <input type="checkbox" class="form-check-input" />
                            [text]
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    ========================================================================== */


.select-option-text {
    padding-block: 0.25rem;
}




/** 
 * Multi-range slider   (.multi-range__slider)
 *
 * @markup
    <div class="multi-range-slider[ multi-ranges-tooltips]"[ data-mdb-tooltip="true"]>
        <div class="multi-range-slider-connects">
            <div class="multi-range-slider-connect"></div>
        </div>
        <div class="multi-range-slider-hand" role="slider" data-mdb-handle="0">
            <div class="multi-range-slider-handle"></div>
            [<span class="multi-range-slider-tooltip">
                <span class="multi-range-slider-tooltip-value">[text]</span>
            </span>]
        </div>
        [multi-range-slider-hand]
    </div>
    ========================================================================== */


.multi-range-slider-hand {
    --mdb-multi-range-hand-bg: var(--mdb-black);
}

.multi-range-slider-tooltip {
    background-color: var(--mdb-black);
}




/** 
 * See more
 *
 * BEM
 *  see-more
 *      __trigger
 *      __target
 *      __label
 *
 * @markup
    <div class="see-more">
        <input class="see-more__trigger" id="[id]" type="checkbox" />
        <* class="see-more__target">[li]</*>
        <label class="see-more__label" for="[see-more__trigger#id]">
            <span class=""see-more__opened"">[text]</span>
            <span class=""see-more__closed"">[text]</span>
        </label>
    </div>
    ========================================================================== */


.see-more__label {
    border-radius: 0;
    cursor: pointer;
    font: var(--dizo-link-standalone-font);
    font-variation-settings: var(--dizo-link-standalone-font-variation-settings);
    font-weight: 400;
    letter-spacing: var(--dizo-link-standalone-letter-spacing);
    line-height: 1;
    padding-bottom: 0.2rem !important;
}

    .see-more__label:hover {
        --mdb-border-opacity: 0;
    }

.see-more__opened,
.see-more__target,
.see-more__trigger:checked ~ .see-more__label .see-more__closed {
    display: none;
}


.see-more__trigger:checked ~ .see-more__label .see-more__opened,
.see-more__trigger:checked ~ .see-more__target {
    display: block;
}


/**
 * PBI 2416 (cuando el checkbox oculto recibe el foco mediante TAB)
 */
.see-more__trigger:focus ~ .see-more__label {
    border-radius: 4px;
    outline: 2px solid;
    outline-offset: 2px;
}




/** 
 * Tabs (.nav-tabs)
 *
 * @markup
    <nav class="nav-tabs" role="tablist">
        [<button class="nav-link[ active]">[text]</button>]
    </nav>
    <div class="tab-content">
        [<section class="tab-pane fade[ active show]">[text]</section>]
    </div>
    ========================================================================== */


.nav-tabs .nav-link {
    --mdb-nav-tabs-link-color: #461622;
    --mdb-nav-tabs-link-padding-x: clamp(0.59rem, 2vw, 1rem);
    --mdb-nav-tabs-link-padding-bottom: 0.59rem;
    --mdb-nav-tabs-link-padding-top: 0.59rem;
    font: var(--dizo-label-font);
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-label-letter-spacing);
    position: relative;
    text-align: center;
    text-transform: none;
}

    .nav-tabs .nav-link .badge {
        background-color: var(--dizo-color-bluewood-50);
        color: var(--dizo-color-bluewood);
        padding: 0.01rem 0.2rem;
        position: absolute;
        right: 0.2em;
        text-align: center;
        top: 0.05em;
    }

        .nav-tabs .nav-link .badge:empty {
            display: none;
        }

    .nav-tabs .nav-link.is-active {
        --mdb-nav-tabs-link-active-bg: transparent;
        --mdb-nav-tabs-link-active-border-color: var(--dizo-color-opera);
        --mdb-nav-tabs-link-active-color: var(--mdb-nav-tabs-link-color);
    }




/** 
 * Tabs > Tab pane  (.tab-pane)
 *
 * BEM
 *  tab-pane
 *      __title
 *
 * @markup
    <section class="tab-pane fade[ active show]">
        <div>
            [<article class="row">
                <h3 class="tab-pane__title">[text]</h3>
                [text]
            </article>]
            [<div class="row">[text]</div>]
        </div>
    </section>
    ========================================================================== */


.tab-pane {
    border-bottom: 0.01rem solid var(--mdb-border-color);
    margin-bottom: 1rem;
    .row

{
    padding-bottom: var(--mdb-gutter-y);
}

}

.tab-pane__title {
    font-size: inherit;
}

    .tab-pane__title::before {
        border-top: 1px solid var(--mdb-border-color);
        content: '';
        display: block;
    }




/** 
 * Tabs > Tab pane > Content > Form
 *
 * @markup
    <section class="tab-pane">
        <div>
            <div>
                [<!-- input -->
                <div>
                    <label class="form-label">[text]</label>
                    <input class="form-control searcher__input" />
                </div>]
                [<!-- select multiple -->
                <div>
                    <label class="form-label">[text]</label>
                    <div class="select-wrapper">
                        <div class="form-outline">    
                            <input class="form-control select-input placeholder-active" />
                            <span class="select-arrow"></span>
                            <div class="form-notch">
                                <div class="form-notch-leading"></div>
                                <div class="form-notch-middle"></div>
                                <div class="form-notch-trailing"></div>
                            </div>
                        </div>
                        <select class="form-select searcher__input searcher__input--literal select-initialized">[option]</select>
                    </div>
                </div>]
                [<!-- interval -->
                <div>
                    <label class="form-label" for="general-year-start">Year</label>
                    <div class="d-flex flex-row flex-wrap interval searcher__input flex-wrap" data-name="year">
                        <input class="form-control form-control--year interval__start" id="general-year-start" max="1815" maxlength="4" min="1724" name="year-start" type="number">
                        <label class="col-form-label" for="general-year-end">&nbsp;to&nbsp;</label>
                        <input class="form-control form-control--year interval__end" id="general-year-end" max="1815" maxlength="4" min="1724" name="year-end" type="number">
                        <div class="invalid-feedback interval__error w-100"></div>
                    </div>
                </div>]
                [<!-- facet -->
                <div class="facet">
                    <label class="form-label">[text]</label>
                    [<div class="form-check">
                        <input class="form-check-input" />
                        <label class="form-check-label">[text]</label>
                    </div>]
                </div>]
            </div>
        </div>
    </section>
    ========================================================================== */


.tab-pane :is(.col-form-label, .form-check-label, .form-label) {
    color: var(--dizo-color-warm-grey-800);
    font: var(--dizo-label-font);
    font-variation-settings: var(--dizo-label-font-variation-settings);
    letter-spacing: var(--dizo-label-letter-spacing);
}

.tab-pane .searcher__input::placeholder {
    color: #989092;
}




/** 
 * Tooltip > personalización Standing  Bird
 * 
 * @markup
    <div class="tooltip[bs-tootltip-[top]]" role="tooltip">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner">[text]</div>
    </div>
    ========================================================================== */


.tooltip {
    --mdb-tooltip-bg: var(--dizo-color-white);
    --mdb-tooltip-color: var(--mdb-body-color);
    --mdb-tooltip-padding-x: 0.5rem;
    --mdb-tooltip-padding-y: 0;
    transform: translateY(100%);
}

.tooltip-inner {
    background: var(--mdb-tooltip-bg);
    border: 1px solid;
    color: var(--mdb-tooltip-color);
}
/*.bs-tootltip-top*/ .tooltip-arrow {
    display: block !important;
    visibility: visible !important;
}
    /*.bs-tootltip-top*/ .tooltip-arrow::after {
        background: var(--mdb-tooltip-bg);
        color: var(--mdb-tooltip-color);
        content: '';
        border: solid currentColor;
        border-width: 0 1px 1px 0;
        display: block;
        height: 0.5rem;
        transform: translateY(-0.65rem) rotate(45deg);
        width: 0.5rem;
    }

.bs-tootltip-top .tooltip-arrow::before {
    display: none !important;
}




/** 
 * Viewer
 *
 * @markup
    <header class="header">
        <div class="container">
            <div class="row">
                <div class="header__brand">[navbar-brand]</div>
                <div class="header__title">
                    <h1>[text]</h1>
                    <span class="header__details">[text]</span>
                </div>
                <div class="fullscreen">[fullscreen]</div>
            </div>
        </div>
    </header>
    <div class="main-content">
        <div class="main">
        [
            <div id="rs-viewer">
                <div class="wrapper">
                    <div class="config">[text]</div>
                </div>
            </div>
        ]
        </div>
    </div>
    ========================================================================== */


/**
 * PBI 1145 (ajuste del pie)
 */
#didone-rs-viewer footer p {
    margin-bottom: 0;
}

    #didone-rs-viewer footer p:empty {
        display: none;
    }




/** 
 * Page > Header    (.header)
 *
 * BEM
 *  header
 *      __brand
 *      __main
 *          __title
 *          __security
 *      __searcher
 *      __nav
 *
 * @markup
    <header class="header">
        <div class="container">
            <div class="header__brand">[navbar-brand]</div>
            <div class="header__main">
                <span class="header__title">[text]</span>
                <nav class="header__security">[header-security]</nav>
            </div>
            <form class="header__searcher">[header-searcher]</form>
        </div>
        <div class="off-canvas">[off-canvas]</div>
        <nav class="header__nav">
            <div>[nav]</div>
        </nav>
    </header>
    ========================================================================== */


.header__title {
    font-size: 1.5rem;
}




/** 
 * Page > Header > Brand  (.navbar-brand)
 *
 * BEM
 *  navbar-brand
 *      __link
 *          __logo
 *
 * @markup
    <div class="navbar-brand">
        <a class="navbar-brand__link">
            <img class="navbar-brand__logo--ucm" />
            <img class="navbar-brand__logo" />
        </a>
    </div>
    ========================================================================== */


@media (width < 1200px) {
    .header__main > nav {
        margin-top: 1rem;
    }
}




/** 
 * Page > Header > Searcher    (.header-searcher)
 *
 * BEM
 *  header-searcher
 *
 * @markup
    <form class="header-searcher">
        <input class="trigger" id="[text]" type="checkbox" />
        <div class="select-wrapper">
            <div class="form-outline">
                <input class="form-control select-input" type="text"  />
                <label class="form-label select-label" style="margin-left: 0px;">Búsqueda avanzada</label>
                <span class="select-arrow"></span>
                <div class="form-notch" style="">
                    <div class="form-notch-leading" style="width: 9px;border: 0;"></div>
                    <div class="form-notch-middle" style="width: 134.4px;border: 0;"></div>
                    <div class="form-notch-trailing"></div>
                </div>
            </div>
            <select class="form-select searcher__input select-initialized">[option]</select>
        </div>
        <input class="form-control searcher__input searcher__trigger header-searcher__search">
        <button class="btn btn-primary px-2 searcher__trigger header-searcher__trigger shadow-none" title="Buscar">
            <img class="searcher__trigger-loupe header-searcher__loupe" />
        </button>
        <label class="d-flex align-items-center">[svg][text]</label>
        <a class="header-searcher__index d-flex align-items-center ms-2">[svg][text]</a>
        <input type="hidden" />
    </form>
    ========================================================================== */


.header-searcher {
    border-radius: 0.25rem;
    padding-left: 1px;
    position: relative;
}

@media (min-width: 1200px) and (max-width: 1400px) {
    /**
     * Hueco para el enlace que lleva al índice.
     * 1. PBI 2427 Task 2440 (se ajusta porque los logos ocupan más espacio)
     */
    .header__searcher {
        margin-inline: auto;
        width: /*auto*/ 23rem;
    }
}

.header-searcher .input-group,
.header-searcher .select-wrapper {
    border: 1px solid var(--mdb-secondary-border-subtle);
}

    .header-searcher .select-wrapper .form-outline {
        border-radius: 0.25rem;
    }

.header-searcher .form-notch > *,
.header-searcher .searcher__trigger {
    border: none !important;
}




/** 
 * Viewer > Fullscreen
 *
 * @markup
    <div class="fullscreen">
        <button class="fullscreen__trigger--[off|on]" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="[text]"></button>
    </div>
    ========================================================================== */


.fullscreen {
    text-align: right;
}

    .fullscreen .fullscreen__trigger {
        --mdb-btn-color: var(--dizo-color-gondola)
    }

    .fullscreen .fullscreen__trigger--off {
        display: none;
    }

/* https://stackoverflow.com/questions/7179535/set-window-to-fullscreen-real-fullscreen-f11-functionality-by-javascript */
*:fullscreen *:-ms-fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    overflow: auto !important;
}

body:is(:fullscreen,:-ms-fullscreen,:-webkit-full-screen,:-moz-full-screen) .fullscreen__trigger--off {
    display: block;
}

body:is(:fullscreen,:-ms-fullscreen,:-webkit-full-screen,:-moz-full-screen) .fullscreen__trigger--on {
    display: none;
}

.fullscreen__trigger, .fullscreen__trigger:hover {
    box-shadow: none !important;
}

.fullscreen__trigger {
    height: 2rem;
    line-height: 1;
    overflow: hidden;
    padding: 0;
    width: 2rem;
}

    .fullscreen__trigger span {
        letter-spacing: 0.1em;
        font-size: 1em;
        display: block;
        transform: rotate(-45deg);
    }

@view-transition {
    navigation: auto; /* enabled */
}

.change-first {
    max-width: 4rem;
}

.results__configuration {
    display: flex;
    gap: 0.5rem;
    justify-content: end;
}




/** 
 * SVG
 *
 * @markup
    <svg>[svg]</svg>
    ========================================================================== */


.detail__image svg {
    height: auto !important;
    position: static !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

rect[fill="rgb(255,255,255)"] {
    fill: transparent !important;
}

text[font-family="'Maestro'"] {
    font-family: Maestro;
}

@media (min-width: 1200px) {
    h3, .h3 {
        font-size: 1.5rem;
    }

    h4, .h4 {
        font-size: 1.25rem;
    }
}




/** 
 * Tags   (.tags)
 *
 * @markup
    <div class="tags">
        <span class="tag">[text]</span>
        [tag]
    </div>
    ========================================================================== */


.tags {
    margin-top: 2rem;
}




/** 
 * Tags > Tag   (.tag)
 *
 *  BEM
 *      tag
 *          __input
 *
 * @markup
    <div class="tags">
        <[form|span] class="tag">[tag__input|text]</[form|span]>
        [tag]
    </div>
    ========================================================================== */


.tag {
    background-color: #ede9e6;
    border: none;
    border-radius: 1rem;
    display: inline-block;
    font: var(--dizo-button-font);
    font-variation-settings: var(--dizo-button-font-variation-settings);
    letter-spacing: var(--dizo-button-letter-spacing);
    margin: 0.25rem;
    padding: 0.15rem 1rem 0.25rem;
}

.tag__input {
    background-color: transparent;
    border: none;
    padding-inline: 0;
}




/** 
 * Cite modal    
    ========================================================================== */


#cite-modal .modal-dialog {
    --mdb-modal-width: 80%;
}

#cite-modal label {
    font: var(--dizo-button-font);
    font-variation-settings: var(--dizo-button-font-variation-settings);
    font-weight: bold;
    letter-spacing: var(--dizo-button-letter-spacing);
}

#cite-modal .cite {
    color: #000;
    display: none;
    font-size: 1rem;
}

    #cite-modal .cite a {
        word-break: break-word;
    }

    #cite-modal .cite.is-active {
        display: block;
    }

#cite-modal .copy {
    --icon-size: 1rem;
    background: no-repeat url(/img/copy-icon.svg);
    border: none;
    height: var(--icon-size);
    min-width: var(--icon-size);
    overflow: hidden;
    text-indent: calc(var(--icon-size) * -10);
    transform: translateY(25%);
    width: var(--icon-size);
}