@import url("./theme.css");
@import url("./base.css");

@layer theme, base, components, layout, forms, index, poeta, equipo, acerca, opticas, afinidades, eventos, autores, indice, buscador, pf_obra, pf_acordeon, utilities;

@layer base {
    ::selection {
        background-color: var(--color-verde);
        color: var(--color-blanco);
    }

    p:has(+ p, + ul) {
        margin-bottom: 20px;
    }

    p:empty::before {
        content: "\200B";
    }

    input, select, option {
        font-family: var(--font-default);
        font-size: inherit;
    }

    body:has(:modal) {
        overflow: hidden;
    }

    richtext-editor {
        //counter-reset: notas-autor-counter notas-editor-counter;
        anchor-scope: all;
    }

    hr {
        margin-bottom: calc(var(--spacing) * 8);

        &:not(.hr-decorado) {
            margin-bottom: calc(var(--spacing) * 4);
        }

        &:where(* + &){
            margin-top: calc(var(--spacing) * 8);
        }
    }

    h1 {
        font-weight: 600;
    }

    h2, h3, h4 {
        font-weight: 500;
    }

    ol {
        &.lista {
            list-style-position: outside;
            padding-left: calc(var(--spacing) * 6);
        }

        &.lista-notas {
            counter-reset: notas-autor-counter notas-editor-counter;
            list-style-position: outside;
            padding-left: calc(var(--spacing) * 6);

            &[data-section="autor"] {
                > li {
                    counter-increment: notas-autor-counter;
                    &::marker {
                        content: counter(notas-autor-counter, notas-autor) "  " / "";
                        font-size: 12px;
                        color: var(--color-azul);
                    }
                }
            }

            &[data-section="editor"] {
                > li {
                    counter-increment: notas-editor-counter;
                    &::marker {
                        content: counter(notas-editor-counter, notas-editor) "  " / "";
                        font-size: 12px;
                        color: var(--color-azul);
                    }
                }
            }
        }

        &[data-type="decimal"] {
            list-style-type: decimal;
        }

        &[data-type="lower-roman"] {
            list-style-type: lower-roman;
        }

        &[data-type="upper-roman"] {
            list-style-type: upper-roman;
        }

        &[data-type="lower-alpha"] {
            list-style-type: lower-alpha;
        }

        &[data-type="upper-alpha"] {
            list-style-type: upper-alpha;
        }
    }

    pdf-previewer {
        display: none;

        &:defined {
            display: block;
        }
    }

    canvas:where(pdf-previewer:defined > *) {
        display: block;
        width: 100%;
        box-shadow: 8px 14px 21px -2px var(--color-gris3);

    }

    ul {
        &.lista {
            list-style-position: outside;
            padding-left: calc(var(--spacing) * 6);
        }

        &[data-type="disc"] {
            list-style-type: disc;
        }

        &[data-type="circle"] {
            list-style-type: circle;
        }

        &[data-type="square"] {
            list-style-type: square;
        }
    }

    @counter-style notas-autor {
        system: cyclic;
        symbols: "&" "†" "‡" "⸶" "⸷" "⹋" "‖" "§" "¶" "#";
        /*suffix: " ";*/
    }

    ol[data-section] + * {
        counter-reset: notas-autor-counter notas-editor-counter;
    }
}

@layer utilities {
    /* || Generales. */
    .logo-print {
        width: 350px;
        max-width: 100%;
        margin-inline: auto;
        margin-bottom: 2rem;
        display: block;
    }

    .oculto-visual {
        position: absolute;
        height: 1px;
        width: 1px;
        clip-path: inset(50%);
        overflow: hidden;
        margin: -1px;

        &.focus-visible--mostrar:focus-visible {
            position: fixed;
            height: auto;
            width: auto;
            clip-path: none;
            margin: 0;
            z-index: 10;
        }
    }

    .body {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .main {
        flex-grow: 1;
        flex-shrink: 1;
    }

    .flex-fila {
        display: flex;
        flex-direction: row;
    }

    .flex-columna {
        display: flex;
        flex-direction: column;
    }

    .flex-items-centrados {
        align-items: safe center;
    }

    .flex-items-inicio {
        align-items: safe start;
    }

    .contenedor-referencia {
        container-type: inline-size;
    }

    .fondo-violeta, [data-bg="violeta"] {
        background-color: var(--color-violeta);
    }

    .fondo-lila, [data-bg="lila"] {
        background-color: var(--color-lila);
    }

    .fondo-negro, [data-bg="negro"] {
        background-color: var(--color-negro);
    }

    .fondo-verde, [data-bg="verde"] {
        background-color: var(--color-verde);
    }

    .fondo-gris2, [data-bg="gris2"] {
        background-color: var(--color-gris2);
    }

    .leading-espaciado {
        line-height: 28px;
    }

    .leading-justo {
        line-height: 1.125;
    }

    .letra-violeta, [data-color="violeta"] {
        color: var(--color-violeta);
    }

    .letra-lila, [data-color="lila"] {
        color: var(--color-lila);
    }

    .letra-gris2, [data-color="gris2"] {
        color: var(--color-gris2);
    }

    .letra-blanca, [data-color="blanca"] {
        color: var(--color-blanco);
    }

    .letra-error {
        color: var(--color-error);
    }

    .fuente-30px, [data-size="30px"] {
        font-size: 30px;
    }

    .fuente-22px, [data-size="22px"] {
        font-size: 22px;
    }

    .fuente-base, [data-size="1rem"] {
        font-size: 1rem;
    }

    .fuente-15px, [data-size="15px"] {
        font-size: 15px;
    }

    .fuente-14px, [data-size="14px"] {
        font-size: 14px;
    }

    .fuente-12px, [data-size="12px"] {
        font-size: 12px;
    }

    .cursor-default {
        cursor: default;
    }

    .sin-subrayado {
        text-decoration: none;
    }

    .mayusculas {
        text-transform: uppercase;
    }

    .italicas {
        font-style: italic;
    }

    .versalitas {
        font-variant: all-small-caps;
    }

    .borde-redondo {
        border-radius: var(--radius-redondo);
    }

    .borde-gris3 {
        border-color: var(--color-gris3);
    }

    .sin-marcador {
        list-style-type: none;
    }

    .posicion-relativa {
        position: relative;
    }

    .alineacion-izquierda, [data-align="izquierda"] {
        text-align: left;
    }

    .alineacion-derecha, [data-align="derecha"] {
        text-align: right;
    }

    .alineacion-centrado, [data-align="centrado"] {
        text-align: center;
    }

    .alineacion-justificado, [data-align="justificado"] {
        text-align: justify;
    }

    .orden-2 {
        order: 2;
    }

    .mx-auto {
        margin-inline: auto;
    }

    .mb-0 {
        margin-block-end: 0;
    }

    .mb-grande {
        margin-bottom: calc(var(--spacing) * 8);
    }

    .mb-triple:not(:last-child), [data-mb="triple"]:not(:last-child) {
        margin-bottom: calc(var(--spacing) * 12);
    }

    .mb-doble:not(:last-child), [data-mb="doble"]:not(:last-child) {
        margin-bottom: calc(var(--spacing) * 8);
    }

    .mb-sencillo:not(:last-child), [data-mb="sencillo"]:not(:last-child) {
        margin-bottom: calc(var(--spacing) * 4);
    }

    .mb-mitad:not(:last-child), [data-mb="mitad"]:not(:last-child) {
        margin-bottom: calc(var(--spacing) * 2);
    }

    .mb-nulo, [data-mb="nulo"] {
        margin-bottom: 0;
    }

    .mt-grande {
        margin-top: calc(var(--spacing) * 10);
    }

    .mt-0 {
        margin-block-start: 0;
    }

    .py-0 {
        padding-block: 0;
    }

    .pl-6 {
        padding-inline-start: calc(var(--spacing) * 6);
    }

    .pb-0 {
        padding-bottom: 0;
    }

    .pb-6 {
        padding-block-end: calc(var(--spacing) * 10);
    }

    .align-start {
        align-items: safe start;
    }

    .peso-600 {
        font-weight: 600;
    }
    
    .peso-regular {
        font-weight: 400;
    }

    .sangria, p[data-type="sangria"] {
        text-indent: 34px;
        /*line-height: var(--leading-pm);*/

        &:is(span) {
            display: inline-block;
        }
    }

    /*p.normal, p[data-type="normal"] {
        line-height: var(--leading-pm);
    }*/

    .margen-izq, p[data-type="margen-izq"] {
        margin-left: 34px;
        /*line-height: var(--leading-pm);*/
    }

    .frances, p[data-type="frances"] {
        padding-left: 34px;
        text-indent: -34px;
        word-break: break-word;
        /*line-height: var(--leading-pm);*/
    }

    .paratexto, p[data-type="paratexto"] {
        /*padding-left: min(55cqi, 38ch);*//*208px;*/
        line-height: var(--leading-pm);
        font-size: 15px;
        text-align: right;
        padding-inline-end: max(0px, calc(100% - 5.5in));
    }

    .bando, p[data-type="bando"] {
        text-indent: min(55cqi, 38ch);
        /*line-height: var(--leading-pm);*/
    }

    [data-ml] {
        margin-inline-start: var(--pm-ml, 0);
    }

    .space, [data-space] {
        display: inline-block;
        width: var(--pm-w, 0.2ch);

        &::before {
            content: " ";
        }

        &:where(.ProseMirror *) {
            background-color: var(--color-gris1);
        }
    }

    /*.fantasma {
        white-space: pre-wrap;
        color: transparent;

        &::selection {
            color: transparent;
            background-color: transparent;
        }

        &:where(.pm-display:not(.show-ghost) *) {
            visibility: hidden;
        }

        &:where(.ProseMirror *) {
            visibility: visible;
            color: var(--color-gris3);
            caret-color: var(--color-negro);

            > div {
                display: inline-block;

                &:empty::before {
                    content: "Texto fantasma...";
                    pointer-events: none;
                }
            }
        }
    }*/

    .ancho-completo {
        width: 100%;
    }

    .inline-block {
        display: inline-block;
    }

    .despliegue-block {
        display: block;
    }

    .liga-hover--subrayado {
        text-decoration: underline;
        text-decoration-color: transparent;

        &:is(a:hover *) {
            text-decoration-color: var(--color-lila);
        }
    }

    .cont-md--cols-6 {
        @container(width >= 960px) {
            grid-column: span 6;
        }
    }

    .cont-md--cols-4 {
        @container (width >= 960px) {
            grid-column: span 4;
        }
    }

    .cont-md--cols-3 {
        @container (width >= 960px) {
            grid-column: span 3;
        }
    }

    .cont-md--cols-2 {
        @container (width >= 960px) {
            grid-column: span 2;
        }
    }

    .no-desplegar {
        display: none;
    }

    .movil--oculto {
        @media (width < 960px) {
            display: none;
        }
    }

    .movil--sin-pt {
        @media (width < 960px) {
            padding-block-start: 0;
        }
    }

    .movil--mb-grande {
        @media (width < 960px) {
            margin-block-end: calc(var(--spacing) * 16);
        }
    }

    .pantalla--orden-2 {
        @media (width >= 960px) {
            order: 2;
        }
    }

    .pantalla--oculto {
        @media (width >= 960px) {
            display: none;
        }
    }

    .aria-pressed--oculto {
        display: inline-block;

        &:is(:where([aria-pressed="true"], [aria-pressed="mixed"]) > *) {
            display: none;
        }
    }

    .aria-pressed--visible {
        display: none;

        &:is(:where([aria-pressed="true"], [aria-pressed="mixed"]) > *) {
            display: inline-block;
        }
    }

    .no-js--oculto {
        &:is(:where(.no-js) *) {
            display: none;
        }
    }

    .hover--fondo-lila {
        @media (hover: hover) {
            &:hover {
                background-color: var(--color-lila);
            }
        }
    }

    .has-disabled--hidden {
        &:has(> :disabled) {
            display: none;
        }
    }

    .disabled--hidden:disabled {
        display: none;
    }

    .grid-celda--centrado-vertical {
        align-self: center;
    }

    @media print {
        header, footer, main {
            display: none;
        }

        body {
            display: block !important;
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
            min-height: unset !important;
        }

        p, h1, h2, h3, h4, h5, h6, hr, figure, table, li {
            break-inside: avoid;
        }

        iframe {
            display: none !important;
        }

        hr {
            border-width: 1px !important;
            border-style: solid !important;
            border-color: var(--color-negro);
            height: 0 !important;
            opacity: 1 !important;
            width: 100%;
        }

        @page {
            size: letter portrait;
            margin: 0.95in 1.25in;

            @bottom-center {
                border-top-style: solid;
                border-top-width: 2px;
                border-top-color: var(--color-negro);
                content: counter(page);
                font-size: 15px;
                text-align: center;
                vertical-align: middle;
            }
        }
    }
}

@layer layout {
    .pm-display, richtext-editor:defined > .ProseMirror {
        counter-reset: notas-autor-counter notas-editor-counter;
        white-space: pre-wrap;

        li {
            &:not(:last-child) {
                margin-bottom: calc(var(--spacing) * 4);
            }
        }

        :where(p, h2, h3, h4, h5, h6, ul, ol, dl, iframe, figure, table):not(:last-child) {
            margin-bottom: 1rem;
        }

        p, figcaption {
            line-height: var(--leading-pm);
        }

        h3, h4, h5, h6 {
            font-size: 1rem;
        }

        &.obra, &:where(richtext-editor.obra:defined *) {
            :is(h1) {
                font-size: 30px;
                color: var(--color-violeta);
                margin-bottom: 0.5rem;
            }

            h2 {
                font-size: 22px;
            }

            .hr-decorado ~ p {
                font-size: 14px;
            }

            :where(ol[data-section] > li, dl > dd) > p {
                font-size: 12px;
                text-indent: -34px;
                padding-left: 34px;
            }

            dl {
                &.lista-notas {
                    counter-reset: notas-autor-counter notas-editor-counter;
                    list-style-position: outside;
                    padding-left: calc(var(--spacing) * 6);
                    display: grid;
                    grid-auto-rows: auto;
                    grid-template-columns: auto 1fr;
                    column-gap: calc(var(--spacing) * 0.5);
                    row-gap: calc(var(--spacing) * 4);
                    align-items: start;

                    &[data-section="autor"] {
                        > dt {
                            display: flex;
                            counter-increment: notas-autor-counter;

                            > a {
                                line-height: 1;

                                &::before {
                                    content: counter(notas-autor-counter, notas-autor) "  " / "";
                                    font-size: 12px;
                                    color: var(--color-azul);
                                }
                            }
                        }
                    }

                    &[data-section="editor"] {
                        > dt {
                            display: flex;
                            counter-increment: notas-editor-counter;

                            > a {
                                line-height: 1;

                                &::before {
                                    content: counter(notas-editor-counter, notas-editor) "  " / "";
                                    font-size: 12px;
                                    color: var(--color-azul);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .lista {
        li {
            &:has(+ li) {
                margin-bottom: calc(var(--spacing) * 4);
            }
        }
    }

    /* || Encabezado */
    .header {
        background-color: var(--color-gris1);
        display: flex;
        flex-direction: column;
    }

    .header-contenedor-superior {
        padding-block: calc(var(--spacing) * 7);
        padding-inline: calc(var(--spacing) * 4);
        border-bottom-width: 2px;
        border-bottom-color: var(--color-negro);
    }

    .header-logos-boton {
        display: flex;
        justify-content: space-between;
        column-gap: calc(var(--spacing) * 4);
        align-items: center;
    }

    .header-contenedor-logos {
        display: flex;
        column-gap: calc(var(--spacing) * 5);
        align-items: center;
        justify-content: safe start;
        max-width: 80%;
    }

    .footer-contenedor-logos-cuadrados {
        list-style-type: none;
        display: flex;
        align-items: safe start;
        justify-content: safe start;
        column-gap: calc(var(--spacing) * 5);
        row-gap: calc(var(--spacing) * 4);
        width: 100%;
    }

    .header-envolvente-logo {
        @media (hover: hover) {
            &:not(.default):hover {
                opacity: 0.7;
            }
        }

        &:focus-visible {
            outline-color: var(--color-negro);
        }
    }

    .header-logo {
        width: 370px;
        display: block;
        max-width: 100%;
    }

    .header-logo-unam {
        width: 60px;
        display: block;
        max-width: 100%;
    }

    .header-logo-iifl {
        width: 60px;
        display: block;
        max-width: 100%;
    }

    .header-lista-redes {
        list-style-type: none;
        display: flex;
        column-gap: calc(var(--spacing) * 4);
        align-items: safe end;

        @media (width < 960px) {
            display: none;
        }
    }

    .header-contenedor-cultura {
        display: flex;
        flex-direction: column;
        align-items: safe end;
        row-gap: calc(var(--spacing) * 2);
        max-width: 350px;
    }

    .parrafo-cultura {
        font-size: 13px;
        line-height: 1.125;
    }

    .red-liga {
        font-size: 37px;
        color: var(--color-negro);

        @media (hover: hover) {
            &:hover {
                opacity: 0.7;
            }
        }

        &:focus-visible {
            outline-color: var(--color-negro);
        }
    }

    .red-img {
        display: block;
        width: 30px;
    }

    .header-contenedor-menu {
        padding-inline: calc(var(--spacing) * 4);

        @media (width < 960px) {
            display: none;
            width: 100%;

            &:is(:where(.no-js) *):is(:target, :has(:target), :has(:focus-visible)) {
                padding-inline: 0;
                display: block;
            }
        }
    }

    .header-boton-menu {
        display: flex;
        column-gap: calc(var(--spacing) * 1.5);
        align-items: center;
        padding-inline: calc(var(--spacing) * 2);
        padding-block: calc(var(--spacing) * 2);
        font-size: 2rem;

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-gris2);
                color: var(--color-negro);
            }
        }

        @media (width >= 960px) {
            &:not(.movil) {
                display: none;
            }
        }

        @media (width < 960px) {
            &.boton-liga:is(:where(.no-js) *) {
                display: flex;
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
        }

        &.boton-liga:not(:where(.no-js) *) {
            display: none;
        }
    }

    .header-menubar {
        z-index: 1;
        position: relative;

        @media (width < 960px) {
            flex-direction: column;
        }
    }

    .menu-contenedor {
        position: relative;
    }

    .menu-desbordable {
        position: absolute;
        opacity: 0;
        left: 0;
        top: 100%;
        height: 1px;
        width: 1px;
        clip-path: inset(50%);
        background-color: var(--color-gris2);
        list-style-type: none;

        &:is(:where(.no-js) *):not(:where(:target, :has(:target), :has(:focus-visible))) {
            display: none;
        }

        @media (width >= 960px) {
            @media (hover: hover) {
                &:is(:where(.menu-contenedor):hover *) {
                    display: block;
                    opacity: 1;
                    clip-path: none;
                    max-width: 225%;
                    min-width: 100%;
                    width: max-content;
                    height: auto;
                }
            }
        }

        &:is(:target, :has(:target), :has(:focus-visible)) {
            display: block;
            opacity: 1;
            clip-path: none;
            max-width: 225%;
            min-width: 100%;
            width: max-content;
            height: auto;
        }

        @media (width < 960px) {
            position: static;

            &:is(:where(.no-js) *) {
                display: none;
            }

            &:is(:target, :has(:target), :has(:focus-visible)) {
                max-width: 100%;
            }
        }
    }

    .menu-opcion {
        display: flex;
        height: 100%;
        column-gap: calc(var(--spacing) * 1.5);
        align-items: center;
        justify-content: safe start;
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 6);

        @media (hover: hover) {
            &:is(:where(.menu-contenedor):has(:hover) *) {
                background-color: var(--color-gris2);
                color: var(--color-violeta);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: -2px;
        }

        &:is([aria-current="page"], :where(.menu-contenedor):has(:where(:target, [aria-current="page"])) *) {
            color: var(--color-lila);
        }
    }

    .menu-etiqueta {
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.05rem;
    }

    .submenu-contenedor {
        position: relative;
    }

    .submenu-desbordable {
        position: absolute;
        opacity: 0;
        left: 100%;
        top: 0;
        height: 1px;
        width: 1px;
        clip-path: inset(50%);
        list-style-type: none;
        background-color: var(--color-gris2);
        border-color: var(--color-gris3);
        border-inline-width: 1px;

        &:is(:where(.no-js) *):not(:where(:target, :has(:target), :has(:focus-visible))) {
            display: none;
        }

        @media (width >= 960px) {
            @media (hover: hover) {
                &:is(:where(.submenu-contenedor):hover *) {
                    display: block;
                    opacity: 1;
                    clip-path: none;
                    max-width: 100%;
                    min-width: 180px;
                    width: max-content;
                    height: auto;
                }
            }
        }

        &:is(:target, :has(:target), :has(:focus-visible)) {
            display: block;
            opacity: 1;
            clip-path: none;
            max-width: 225%;
            min-width: 100%;
            width: max-content;
            height: auto;
        }

        @media (width < 960px) {
            @media (width < 960px) {
                position: static;

                &:is(:where(.no-js) *) {
                    display: none;
                }

                &:is(:target, :has(:target), :has(:focus-visible)) {
                    max-width: 100%;
                }
            }
        }
    }

    .submenu-opcion {
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        border-color: var(--color-gris3);
        border-top-width: 1px;
        word-spacing: 3px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.25;
        display: flex;
        column-gap: calc(var(--spacing) * 2);
        align-items: center;

        @media (hover: hover) {
            &:hover, &:has(+ .submenu-desbordable:hover) {
                background-color: var(--color-violeta);
                color: var(--color-blanco);
            }
        }

        &:is(:where(.submenu-contenedor, .submenu-desbordable > li):last-of-type > *) {
            border-bottom-width: 1px;
        }

        &:is([aria-current="page"], :where(.submenu-contenedor):has(:where(:target, [aria-current="page"])) > *) {
            background-color: var(--color-lila);
            color: var(--color-blanco);
        }

        &:focus-visible {
            outline-offset: -2px;
            outline-color: var(--color-negro);
        }
    }

    /* || Clases del menú móvil. */
    .menu-movil-modal {
        flex-direction: column;
        width: min(calc(100dvw - 3rem), 400px);
        min-height: 100dvh;
        background-color: var(--color-gris2);
        transition: var(--transition-default), transform 0.3s ease-in-out;
        /*transform: translateX(-100%);*/
        row-gap: calc(var(--spacing) * 4);

        /*&:open {
          transform: translateX(0%);
        }*/
    }

    .menu-movil-header {
        display: flex;
        align-items: safe center;
        justify-content: safe end;
        padding-block: calc(var(--spacing) * 4);
        padding-inline: calc(var(--spacing) * 6);
    }

    /*@starting-style {
      .menu-movil-modal:open {
        transform: translateX(-100%);
      } 
    }*/

    .menu-movil-nav {
        /*padding-inline: calc(var(--spacing) * 6);*/
    }

    .menu-movil-boton {
        width: 100%;
        display: flex;
        column-gap: calc(var(--spacing) * 6);
        align-items: safe center;
        justify-content: space-between;
        border-bottom-width: 2px;
        border-bottom-color: var(--color-gris4);
        padding-block: calc(var(--spacing) * 3);
        padding-inline: calc(var(--spacing) * 2);

        &.opcion-principal {
            font-size: 22px;
            font-weight: 600;
            text-transform: uppercase;
        }

        &.subopcion {
            font-weight: 500;
            border-bottom-color: var(--color-gris3);
            border-bottom-width: 1px;
        }

        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: -2px;
        }

        &[aria-expanded="true"] {
            color: var(--color-violeta);
        }

        &:has(+ [role="menu"] [aria-current="page"]), &[aria-current="page"] {
            color: var(--color-lila);
            background-color: var(--color-gris1);
        }
    }

    .menu-movil-boton-etiqueta {
        line-height: 1.125;
        text-align: start;
    }

    .menu-movil-boton-icono {
        font-size: 34px;

        &.menos {
            display: none;
        }

        &:is(:where(.menu-movil-boton)[aria-expanded="true"] > *) {
            display: none;

            &.menos {
                display: block;
            }
        }
    }

    .menu-movil-desbordable {
        display: flex;
        flex-direction: column;

        &:is(:where(.menu-movil-boton)[aria-expanded="false"] + *) {
            display: none;
        }
    }

    .menu-movil-opcion {
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 3);
        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: -2px;
        }

        &[aria-current="page"] {
            color: var(--color-violeta);
            background-color: var(--color-blanco);
        }
    }

    /* || Clases del footer. */
    .footer {
        background-color: var(--color-lila);
        color: var(--color-blanco);
    }

    .footer-divisor {
        background-color: var(--color-violeta);
        background-image: url("../images/elemento-pleca.svg"); /* cambiar por la URL fija que quede */
        background-repeat: repeat-x;
        display: block;
        height: 60px;
    }

    .footer-contenedor-informacion {
        padding-inline: calc(var(--spacing) * 6);
        padding-top: calc(var(--spacing) * 24);
        padding-bottom: calc(var(--spacing) * 16);
        display: flex;
        column-gap: calc(var(--spacing) * 16);

        @media (width < 960px) {
            flex-direction: column;
            row-gap: calc(var(--spacing) * 8);
        }
    }

    .footer-seccion {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 6);

        @media (width < 960px) {
            width: auto;
            max-width: 550px;
        }
    }

    .footer-descripcion {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 6);
        align-items: start;

        @media (width >= 960px) {
            width: 33.33%;
        }
    }

    .footer-contenedor-logos {
        display: grid;
        grid-template-columns: repeat(2, minmax(auto, 70px)) minmax(auto, 250px);
        grid-template-rows: repeat(2, auto);
        column-gap: calc(var(--spacing) * 5);
        row-gap: calc(var(--spacing) * 4);
        width: 100%;
    }

    .footer-envolvente-logo {
        &.principal {
            grid-column: 1 / span 3;
        }

        &:not(.principal) {
            @media (hover: hover) {
                &:hover {
                    opacity: 0.6;
                }
            }
        }
    }

    .footer-liga-logo {
        &:focus-visible {
            outline-color: var(--color-blanco);
        }
    }

    .footer-logo {
        width: 100%;
        max-width: 350px;

        &.cuadrado {
            max-width: 65px;
        }

        &.cultura {
            width: 350px;
            max-width: 100%;
        }
    }

    .footer-titulo {
        font-weight: 600;
        font-size: var(--size-titulo-footer);
    }

    .footer-redes {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 3);
        word-break: break-all;
    }

    .footer-red-img {
        display: block;
        width: 30px;

        @media (hover: hover) {
            &:is(:where(.footer-menu-opcion):hover *) {
                opacity: 0.7;
            }
        }
    }

    .footer-menu-opcion {
        font-weight: 700;
        font-size: 15px;
        display: flex;
        column-gap: calc(var(--spacing) * 3);
        align-items: safe center;

        @media (hover: hover) {
            &:hover {
                color: var(--color-gris3);
            }
        }

        &:focus-visible {
            outline-color: var(--color-blanco);
        }
    }

    .footer-liga {
        @media (hover: hover) {
            &:hover {
                color: var(--color-gris3);
            }
        }

        &:focus-visible {
            outline-color: var(--color-blanco);
        }
    }

    /* || Clases asociadas al panel */
    .panel-main {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
    }

    .panel-lateral {
        background-color: var(--color-gris2);
        width: 350px;
        flex-shrink: 0;

        @media (width < 960px) {
            display: none;
        }
    }

    .panel-contenido {
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 8);
        width: calc(100% - 350px);
        flex-grow: 1;

        @media (width < 960px) {
            width: 100%;
        }
    }

    .panel-index-table--container {
        overflow: auto;
        padding-block-start: calc(var(--spacing) * 4);
        padding-block-end: calc(var(--spacing) * 10);
        padding-inline-end: calc(var(--spacing) * 2);
        width: 100%;
        height: auto;
        margin-block-start: calc(var(--spacing) * 6)
    }

    .panel-index-table {
        table-layout: fixed;
        border-collapse: collapse;
        width: max-content;
        min-width: 100%;
    }

    .panel-index-table--header-cell {
        border-width: 1px;
        border-color: var(--color-lila);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        text-align: center;
        font-weight: 500;
        font-size: 22px;
        background-color: var(--color-gris1);

        &:last-of-type:not(.mostrar) {
            border-width: 0;
            background-color: transparent;
        }

        &.mostrar {
            background-color: rgb(from var(--color-lila) r g b / 0.3);
            text-align: right;
            width: 400px;
        }
    }

    .panel-index-table--cell {
        border-width: 1px;
        border-color: var(--color-lila);
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 2.5);
        max-width: 450px;
        width: max-content;
        min-width: 300px;

        &:last-of-type {
            min-width: auto;
        }
    }

    .panel-index-table--row {
        &:nth-child(odd) {
            background-color: rgb(from var(--color-lila) r g b / 0.2);
        }
    }

    .panel-actions-container {
        display: flex;
        align-items: center;
        column-gap: calc(var(--spacing) * 2.5);
    }

    .panel-action {
        font-size: 26px;

        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:focus-visible {
            color: var(--color-violeta);
            outline-color: var(--color-violeta);
        }
    }

    .panel-contenedor-autorobra-fields {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        align-items: safe start;
    }
}

@layer components {
    .icono-fill {
        display: inline;
        font-family: var(--font-phosphor-fill);
    }

    .icono-bold {
        display: inline;
        font-family: var(--font-phosphor-bold);
    }

    .main-contenedor {
        width: 100%;
        padding-inline: calc(var(--spacing) * 8);
        padding-block: calc(var(--spacing) * 12);
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 5);
        align-items: safe start;

        @container (width >= 960px) {
            &.mayor {
                width: 60%;
            }

            &.menor {
                width: 40%;
            }
        }
    }

    .contenedor-espacio-horizontal {
        padding-inline: calc(var(--spacing) * 6);
        width: 100%;
    }

    .envolvente-contenedor {
        padding-inline: calc(var(--spacing) * 6);
        width: 100%;
    }

    .contenedor-lg {
        max-width: var(--contenedor-lg);
        width: 100%;
        margin-inline: auto;
    }

    .contenedor-externo {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 10);
        padding-block: calc(var(--spacing) * 20);

        @media(width >= 960px) {
            flex-direction: row;
            flex-wrap: wrap;
        }

        @media (width < 960px) {
            &.movil--pb-0 {
                padding-block-end: 0;
            }
        }
    }

    .contenedor-flex-col {
        display: flex;
        flex-direction: column;
        padding-block: calc(var(--spacing) * 20);
        row-gap: calc(var(--spacing) * 10);
    }

    .liga-rapida {
        &:focus-visible {
            outline-color: var(--color-negro);
            color: var(--color-negro);
            background-color: var(--color-gris2);
            padding-inline: calc(var(--spacing) * 4);
            padding-block: calc(var(--spacing) * 2);
        }
    }

    .liga {
        color: var(--color-lila);
        text-decoration-color: transparent;
        text-decoration-line: underline;

        &[data-type] {
            color: inherit;
        }

        @media (hover: hover) {
            &:hover {
                color: var(--color-violeta);
                text-decoration-color: var(--color-violeta)
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
        }

        &.accion-panel {
            display: inline-flex;
            column-gap: calc(var(--spacing) * 2);
            align-items: center;
            text-decoration: none;
        }
    }

    .titulo {
        font-weight: 600;
        font-size: 30px;
        margin-bottom: calc(var(--spacing) * 2.5);
        line-height: 1.125;

        &.grande {
            font-size: 30px;
        }

        &.chico {
            font-size: 22px;
        }

        &.mb-grande {
            margin-bottom: calc(var(--spacing) * 10);
        }
    }

    .titulo-seccion-lateral {
        font-weight: 500;
        font-size: 28px;
        line-height: 1.125;
        color: var(--color-violeta);
        border-bottom-width: 1px;
        border-bottom-color: var(--color-gris1);
        padding-bottom: calc(var(--spacing) * 4);
        width: 100%;
    }

    .boton {
        background-color: var(--color-violeta);
        color: var(--color-blanco);
        padding-inline: calc(var(--spacing) * 7);
        padding-block: calc(var(--spacing) * 3.5);
        border-color: var(--color-violeta);
        border-width: 2px;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        display: inline-block;
        text-align: center;

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-blanco);
                color: var(--color-negro);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            background-color: var(--color-lila);
        }
    }

    .boton-arriba {
        position: fixed;
        z-index: 1;
        bottom: calc(var(--spacing) * 4);
        right: calc(var(--spacing) * 4);
        display: flex;
        align-items: safe center;
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spcaing) * 3);
        border-radius: var(--radius-redondo);
        border-color: var(--color-violeta);
        background-color: var(--color-violeta);
        column-gap: calc(var(--spacing) * 1.5);
        border-width: 3px;
        font-weight: 600;
        font-size: 16px;
        opacity: 0.7;

        @media (hover: hover) {
            &:hover {
                opacity: 1;
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            opacity: 1;
        }
    }

    .campo-texto {
        background-color: white;
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        border-radius: var(--radius-redondo);
        width: 100%;
    }

    .lista-indentada {
        list-style-position: outside;
        padding-left: calc(var(--spacing) * 4);

        > li::marker {
            color: var(--color-violeta);
        }
    }

    .decoracion-divisor {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
    }

    .divisor {
        margin-block: calc(var(--spacing) * 6);
        height: 1px;
        width: 100%;
        background-color: var(--color-gris1);
        display: block;

        &.mt-grande {
            margin-block-start: calc(var(--spacing) * 16);
        }

        &.mb-grande {
            margin-block-end: calc(var(--spacing) * 16);
        }

        &.sin-margen {
            margin-block: 0;
        }
    }

    .seccion-despliegue {
        padding-inline: calc(var(--spacing) * 6);
        width: 100%;

        @container (width >= 960px) {
            width: 60cqi;
        }
    }

    .seccion-lateral {
        width: 100%;

        @container (width >= 960px) {
            width: 40cqi;
            padding-inline: calc(var(--spacing) * 6.5);
        }
    }

    .seccion-lateral-contenedor {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 5);
        align-items: safe start;
        padding-inline: calc(var(--spacing) * 5);
        padding-block: calc(var(--spacing) * 11);

        @container (width >= 960px) {
            border-color: #F0F0F0;
            border-width: 1px;
        }
    }

    .descriptor-titulo {
        color: var(--color-lila);
        display: block;
        margin-bottom: calc(var(--spacing) * 0.5);
        font-size: 22px;
        font-weight: 500;
    }

    .resultados {
        font-weight: 500;
        line-height: 1.125;
        font-size: 20px;
    }

    .resultados-contenedor {
        display: flex;
        flex-direction: column;
        border-top-width: 1px;
        border-color: var(--color-negro);
        
        &.fragmentos {
            display: block;
            padding-block: calc(var(--spacing) * 4);
            columns: 2;
            column-gap: calc(var(--spacing) * 4);column-rule-width:2px;
            column-rule-style: solid;
            column-rule-color: var(--color-gris3);
            
            @container (width < 960px) {
                columns: 1;
            }
        }
    }
    
    .fragmentos-despliegue {
        width: 100%;
        padding-inline: calc(var(--spacing) * 6);
    }

    .fragmento-ficha {
        padding: calc(var(--spacing) * 8)calc(var(--spacing) * 8);
        display: flex;
        flex-direction: column;
        justify-content: safe start;
        row-gap: calc(var(--spacing) * 8);
        position: relative;
        break-inside: avoid;
        border-style: solid;
        border-color: var(--color-gris3);
        border-top-width: 0;
        border-left-width: 0;
        max-width: 50ch;
        margin-inline: auto;
        
        &::before {
            position: absolute;
            width: 50%;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--color-gris3);
            border-radius: var(--rounded-redondo);
            height: 2px;
            content: "";
        }
        
        &:not(:last-child) {
            margin-block-end: calc(var(--spacing) * 4);
        }
    }
    
    .fragmento-ficha--ilustracion {
        position: absolute;
        bottom: calc(var(--spacing) * 4);
        right: calc(var(--spacing) * 4);
        animation-name: glow;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
        width: 50px;
        pointer-events: none;
        
        &:where(.fragmento-ficha:nth-of-type(3n+1) *) {
            animation-delay: 0.3s;
        }
        
        &:where(.fragmento-ficha:nth-of-type(3n+2) *) {
            animation-delay: 0.6s;
        }
        
        &:where(.fragmento-ficha:nth-of-type(2n+1) *) {
            transform: scaleX(-1);
        }
        
        &:where(.fragmento-ficha:nth-of-type(4n) *) {
            animation-duration: 1s;
        }
        
        &:where(.fragmento-ficha:nth-of-type(4n+1) *) {
            animation-duration: 1.6s;
        }
        
        &:where(.fragmento-ficha:nth-of-type(4n+2) *) {
            animation-duration: 0.85s;
        }
        
        &:where(.fragmento-ficha:nth-of-type(4n+3) *) {
            animation-duration: 1.2s;
        }
    }

    .ficha {
        display: flex;
        flex-direction: column;
        align-items: safe start;
        padding-block-start: calc(var(--spacing) * 8);
        width: 100%;

        &:where(.ficha-contenedor-lateral > *:first-child) {
            padding-block-start: calc(var(--spacing) * 2);
        }

        &:has(+ .ficha) {
            padding-block-end: calc(var(--spacing) * 8);
            border-bottom-color: var(--color-gris3);
            border-bottom-width: 1px;
        }
    }

    .ficha-contenedor-lateral {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .ficha-titulo {
        font-weight: 600;
        line-height: 1.125;
        font-size: 20px;
    }

    .ficha-lista-autores {
        list-style-type: none;
        list-style-position: outside;
        
        &.fragmentos {
            display: flex;
            flex-direction: column;
            align-items: safe end;
            text-align: right;
            /*margin-inline-end: min(16rem, max(0px, calc(100% - 50ch)));*/
        }
    }

    .ficha-autor, .ficha-fecha {
        font-weight: 500;
        font-size: 17px;
        color: var(--color-lila);

        &:has (+ .ficha-autor) {
            margin-bottom: calc(var(--spacing) * 1.5);
        }
        
        &:where(.fragmentos > *) {
            font-weight: 600;
        }
    }
    
    .obra-ficha-grafico {
        max-width: 100%;
        width: 250px;
    }

    .ficha-botones-container {
        display: flex;
        column-gap: calc(var(--spacing) * 4);
        align-items: safe center;

        @container (width >= 450px) {
            flex-direction: column;
            row-gap: calc(var(--spacing) * 4);
            align-items: safe start;

            &.espaciados {
                flex-direction: row;
                max-width: 400px;
                margin-inline: auto;
            }
        }

        &.espaciados {
            flex-direction: column;
            row-gap: calc(var(--spacing) * 4);
        }
    }

    .liga-imagen {
        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: 3px;
        }
    }

    /* || Estilos del paginado. */
    .paginado-contenedor {
        display: flex;
        align-items: safe center;
        justify-content: safe center;
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 8);
        column-gap: calc(var(--spacing) * 2);

        &.con-separador {
            margin-block-start: calc(var(--spacing) * 8);
            border-top-width: 2px;
            border-top-color: var(--color-gris3);
        }
    }

    .paginado-elipsis {
        font-weight: 500;
    }

    .paginado-opcion {
        background-color: transparent;
        font-weight: 500;
        font-size: 1.375rem;
        color: var(--color-negro);
        padding-block: calc(var(--spacing) * 1.5);
        padding-inline: calc(var(--spacing) * 1.5);

        @media(hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:focus-visible {
            outline-color: var(--color-lila);
            color: var(--color-lila);
        }
    }

    .paginado-actual {
        background-color: var(--color-violeta);
        color: var(--color-blanco);
        font-weight: 500;
        font-size: 1.375rem;
        cursor: default;
        padding-block: calc(var(--spacing) * 1.5);
        padding-inline: calc(var(--spacing) * 2.5);
    }

    /* || Estilos de formularios. */
    .formulario-filtros {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        width: 95%;
        margin-inline: auto;
    }

    .filtro-contenedor {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: safe start;
        row-gap: calc(var(--spacing) * 4);
        width: 100%;

        &.horizontal {
            flex-direction: row;
            column-gap: calc(var(--spacing) * 2);
            align-items: safe center;
        }

        &.con-borde-inferior {
            border-bottom-width: 1px;
            border-bottom-color: var(--color-gris1);
            padding-block-end: calc(var(--spacing) * 5);
        }

        @container (width >= 200px) {
            &.responsivo {
                flex-direction: row;
                column-gap: calc(var(--spacing) * 8);
                align-items: safe center;
            }

            &.abarcar-medio {
                width: calc(50cqi - var(--spacing) * 4);
            }
        }
    }

    .filtro-campo {
        background-color: var(--color-blanco);
        border-color: var(--color-gris3);
        border-radius: var(--radius-redondo);
        border-width: 1px;
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        min-width: 0;
        width: 100%;

        &::placeholder {
            color: var(--color-gris4);
        }

        &.con-icono {
            padding-inline-end: calc(var(--spacing) * 10);
        }

        &.etiqueta {
            display: flex;
            column-gap: calc(var(--spacing) * 1.5);
            align-items: center;
            width: auto;
        }

        &:is(select) {
            -moz-appearance: none;
            appearance: none;
            height: 2.5rem;
        }

        &:focus {
            outline-color: var(--color-violeta);
        }
    }

    .filtro-campo-numerico {
        border-width: 0;
        border-bottom-color: var(--color-negro);
        border-bottom-width: 2px;
        -moz-appearance: textfield;
        appearance: textfield;
        background-color: var(--color-blanco);
        flex-grow: 1;
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 0.5);
        min-width: 0;

        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
            appearance: none;
            -webkit-appearance: none;
            margin: 0;
        }

        &:focus {
            outline-color: var(--color-violeta);
        }
    }

    .filtro-icono {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        pointer-events: none;
        padding-inline: calc(var(--spacing) * 4);
        font-size: 20px;
    }

    .filtro-titulo {
        font-weight: 500;
        font-size: 20px;
        line-height: 1.125;
    }

    .filtro-botones-contenedor {
        display: grid;
        grid-template-rows: 1fr;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(auto-fit, minmax(1.25rem, 1fr));
        row-gap: calc(var(--spacing) * 7);
        column-gap: calc(var(--spacing) * 7);
        align-items: safe center;
        justify-content: safe start;
        width: 100%;
    }

    .filtro-boton-contenedor {
        display: flex;
        justify-content: safe center;

        &.default {
            width: 1px;
            height: 1px;
            clip-path: inset(50%);
            overflow: hidden;
            position: absolute;
            grid-column: 1 / span 2;

            &:is(:where(.filtro-botones-contenedor):has(:focus-visible) *) {
                width: auto;
                height: auto;
                clip-path: none;
                overflow: visible;
                position: relative;
            }
        }
    }

    .filtro-campo-boton {
        width: 1px;
        height: 1px;
        clip-path: inset(50%);
        overflow: hidden;
        position: absolute;
    }

    .filtro-etiqueta-boton {
        line-height: 20px;
        font-weight: 500;
        font-size: 20px;
        /*padding-inline: calc(var(--spacing) * 1.5);
        padding-block: calc(var(--spacing) * 1);*/
        cursor: pointer;

        &:is(:where(.filtro-campo-boton):focus-visible + *) {
            outline-color: var(--color-violeta);
            outline-width: 2px;
            outline-style: solid;
            outline-offset: 3px;
        }

        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:is(:where(.filtro-campo-boton):checked + *) {
            color: var(--color-lila);
        }
    }

    .filtro-contenedor-acciones {
        display: flex;
        flex-direction: column;
        align-items: safe start;
        justify-content: safe start;
        row-gap: calc(var(--spacing) * 4);
    }

    .filtro-acciones-ligas {
        display: flex;
        column-gap: calc(var(--spacing) * 6);
        justify-content: space-between;
        align-items: safe center;
    }

    .mas-filtros-etiqueta {
        &:is(:where([aria-expanded="true"]) > *) {
            width: 1px;
            height: 1px;
            position: absolute;
            clip-path: inset(50%);
            overflow: hidden;
        }
    }

    .menos-filtros-etiqueta {
        &:is(:where([aria-expanded="true"]) > *) {
            display: inline-block;
        }
    }

    .filtro-acordeon-titulo-liga {
        display: flex;
        column-gap: calc(var(--spacing) * 6);
        align-items: safe center;
        justify-content: space-between;
        width: 100%;
        padding-block: calc(var(--spacing) * 4);
        border-bottom-color: var(--color-gris3);
        border-bottom-width: 1px;

        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &[aria-expanded="true"] {
            color: var(--color-violeta);
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: -1px;
        }
    }

    .filtro-acordeon-etiqueta {
        font-weight: 600;
    }

    .filtro-acordeon-mas {
        display: inline-block;

        &:is(:where(.filtro-acordeon-titulo):where(:target, :has([aria-expanded="true"])) *) {
            display: none;
        }
    }

    .filtro-acordeon-menos {
        display: none;

        &:is(:where(.filtro-acordeon-titulo):where(:target, :has([aria-expanded="true"])) *) {
            display: inline-block;
        }
    }

    .filtro-acordeon-contenido {
        padding-block: calc(var(--spacing) * 6);
        display: none;

        &:is(:where(.filtro-acordeon-titulo:where(:target, :has([aria-expanded="true"]))) + *) {
            display: block;
            width: 100%;
            border-bottom-color: var(--color-gris2);
            border-bottom-width: 1px;
        }
    }

    /* || Estilos del formulario de acceso. */
    .login-form {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        max-width: 680px;
        width: 100%;
    }

    /* Estilos de los formularios del panel. */

    .panel-form, .panel-campo-compuesto {
        display: grid;
        container-type: inline-size;
        grid-auto-rows: auto;
        grid-template-columns: repeat(6, 1fr);
        column-gap: calc(var(--spacing) * 6);
        row-gap: calc(var(--spacing) * 4);
        max-width: 1000px;
        margin-block-start: calc(var(--spacing) * 6);

        &.filter {
            margin-top: calc(var(--spacing) * 6);
        }
    }

    .panel-campo-contenedor {
        grid-column: 1 / -1;
    }

    .panel-links-list {
        list-style-type: none;
        list-style-position: outside;

        > li:has(+ li) {
            margin-bottom: calc(var(--spacing) * 1.5);
        }
    }

    .panel-dialog {
        width: min(calc(100dvw - var(--spacing) * 6), 850px);
        margin-inline: auto;
        height: max(400px, calc(100dvh - var(--spacing) * 32));
        margin-block: auto;
        background-color: var(--color-gris2);
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 4);
        border-radius: var(--radius-md);

        &::backdrop {
            background-color: rgb(from var(--color-negro) r g b / 0.3);
        }
    }

    .panel-filtro-contenedor {
        display: flex;
        justify-content: safe center;
        margin-top: calc(var(--spacing) * 4);
    }

    .panel-dialog--header {
        display: flex;
        justify-content: safe end;
    }

    .panel-filter-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-column: 1 / -1;
    }

    .panel-checkbox-table {
        tr {
            &:has(+ tr) {
                margin-bottom: calc(var(--spacing) * 4);
            }

            > td {
                padding-inline: calc(var(--spacing) * 4);

                &:first-of-type {
                    padding-inline-start: 0;
                }

                &:last-of-type {
                    padding-inline-end: 0;
                }
            }
        }

        input[type="checkbox"] {
            transform: scale(1.5);
            accent-color: var(--color-lila);
        }

        label {
            font-weight: 500;
            display: inline-block;
            margin-inline-start: calc(var(--spacing) * 4);

            @media(hover: hover) {
                &:hover, &:is(:where(input):hover + *) {
                    color: var(--color-violeta);
                }
            }

            &:is(:where(input):checked + *), :is(:where(input):focus-visible + *) {
                color: var(--color-violeta);
            }
        }
    }

    .panel-image {
        max-width: 250px;
        width: 100%;
        margin-inline: auto;
        display: inline-block;
    }

    .panel-file-uploader {
        container-type: inline-size;
        width: 100%;
    }

    .panel-file-input:where(.panel-file-uploader:defined *) {
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        position: absolute;
    }

    .panel-file-uploader--buttons-container:where(.panel-file-uploader:defined *) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: calc(var(--spacing) * 4);

        @container (width < 640px) {
            flex-direction: column;
            row-gap: calc(var(--spacing) * 4);
        }

        @container (width >= 640px) {
            flex-direction: row;
            column-gap: calc(var(--spacing) * 4);
        }
    }

    .panel-file-uploader--upload-button:where(.panel-file-uploader:defined *) {
        background-color: transparent;
        width: 100%;
        text-align: center;
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 4);
        font-weight: 600;
        border-width: 4px;
        border-style: dashed;
        border-color: var(--color-lila);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-default), border-style 0.3s linear;
        transition-behavior: allow-discrete;

        &:focus-visible:enabled, &.dragging {
            border-style: solid;
            background-color: rgb(from var(--color-lila) r g b / 0.5);
            color: white;
        }

        &:disabled {
            border-style: solid;
            border-color: var(--color-gris5);
            background-color: var(--color-gris1);
            color: var(--color-negro);
        }

        @media (hover: hover) {
            &:hover:enabled {
                border-style: solid;
                background-color: rgb(from var(--color-lila) r g b / 0.5);
            }
        }
    }

    .panel-file-uploader--action-button:where(.panel-file-uploader:defined *) {
        border-radius: var(--radius-redondo);
        border-width: 2px;
        padding-inline: calc(var(--spacing) * 5);
        padding-block: calc(var(--spacing) * 1.5);
        border-color: var(--color-violeta);
        font-weight: 500;
        font-size: 18px;

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-violeta);
                color: var(--color-blanco);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
        }

        &:disabled {
            display: none;
        }
    }

    .panel-attachment-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: calc(var(--spacing) * 4);
    }

    .panel-attachment-container--actions:where(.panel-attachment-container:defined *) {
        display: flex;
    }

    .panel-attachment-container--textarea:where(.panel-attachment-container:defined *) {
        flex-grow: 1;
        border-top-left-radius: var(--radius-md);
        border-bottom-left-radius: var(--radius-md);
        border-width: 2px;
        border-color: var(--color-blanco);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 1.5);
        resize: none;
        height: 3rem;
        cursor: default;

        @media (hover: hover) {
            &:is(:where(.panel-attachment-container:defined .panel-attachment-container--actions):hover *):not(:disabled) {
                background-color: var(--color-gris1);
                color: var(--color-violeta);
                border-color: var(--color-violeta);
            }
        }

        &:is(:disabled), &:is(:where(.panel-attachment-container:defined) *):has(+ .panel-attachment-container--button:focus-visible) {
            border-color: var(--color-violeta);
        }
    }

    .panel-attachment-container--button:where(.panel-attachment-container:defined *) {
        flex-shrink: 0;
        border-top-right-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
        border-width: 2px;
        border-left-width: 0;
        border-color: var(--color-blanco);
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
        font-size: 1.5rem;
        background-color: rgb(from var(--color-lila) r g b / 0.8);
        color: var(--color-blanco);

        @media (hover: hover) {
            &:is(:where(.panel-attachment-container:defined .panel-attachment-container--actions):hover *) {
                background-color: var(--color-violeta);
                color: var(--color-blanco);
                border-color: var(--color-violeta);
            }
        }

        &:focus-visible {
            background-color: var(--color-violeta);
            color: var(--color-blanco);
            border-color: var(--color-violeta);
        }

        &:is(:disabled) {
            background-color: var(--color-violeta);
            color: var(--color-blanco);
            border-color: var(--color-violeta);
        }
    }

    .panel-etiquetas-contenedor {
        display: flex;
        align-items: center;
        column-gap: calc(var(--spacing) * 4);
        row-gap: calc(var(--spacing) * 2);
        justify-content: safe start;
        flex-wrap: wrap;
    }

    .panel-campo-etiqueta {
        display: flex;
        flex-direction: column;
        width: 100%;

        & .filtro-campo {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        & .borde-redondo {
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }

        @container (width >= 640px) {
            flex-direction: row;

            & .filtro-campo {
                border-bottom-left-radius: var(--radius-redondo);
                border-top-right-radius: 0;
                flex-grow: 1;
            }

            & .borde-redondo {
                border-top-right-radius: var(--radius-redondo) !important;
                border-bottom-left-radius: 0 !important;
                flex-shrink: 0;
            }
        }
    }

    /* || Estilos del editor de textos. */

    .editor-toolbar {
        display: none;

        &:where(richtext-editor:defined *) {
            display: flex;
            column-gap: calc(var(--spacing) * 4);
            row-gap: calc(var(--spacing) * 3);
            align-items: safe center;
            justify-content: safe start;
            flex-wrap: wrap;
            margin-block-end: calc(var(--spacing) * 4);
        }
    }
    .editor-button-container {
        /*position: relative;*/
    }

    .editor-section {
        display: flex;
        flex-wrap: wrap;
        column-gap: calc(var(--spacing) * 1.5);
        align-items: center;
        row-gap: calc(var(--spacing) * 2.5);
    }

    .editor-toolbar-button:where(richtext-editor:defined *) {
        border-width: 1px;
        border-color: var(--color-gris3);
        border-radius: var(--radius-md);
        padding-inline: calc(var(--spacing) * 2.5);
        padding-block: calc(var(--spacing) * 0.75);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;

        &[aria-pressed="true"], &[aria-expanded="true"] {
            background-color: var(--color-lila);
            color: var(--color-blanco);
            border-color: var(--color-violeta);
        }

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-gris1);
            }
        }

        &:disabled {
            background-color: var(--color-gris3);
        }
    }

    .editor-dialog {
        display: none;
        position: absolute;
        z-index: 1;
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 3);
        background-color: var(--color-blanco);
        box-shadow: 2px 2px 8px 2px var(--color-gris3);
        border-radius: var(--radius-md);

        &:where(.editor-toolbar-button[aria-expanded="true"] + *) {
            display: flex;
            flex-direction: column;
            row-gap: calc(var(--spacing) * 3);
            max-width: 100dvw;
            top: anchor(bottom);
            justify-self: anchor-center;
            position-visibility: always;

            &.two-columns {
                display: grid;
                grid-template-columns: 1fr;
                column-gap: calc(var(--spacing) * 2);

                @media (width >= 960px) {
                    grid-template-columns: 1fr 1fr;
                }
            }
        }
    }

    .editor-dialog-container {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 1.5);
    }

    .editor-dialog-label {
        font-size: 0.875rem;
        font-weight: 500;
    }

    .editor-checkbox-container {
        display: flex;
        column-gap: calc(var(--spacing) * 2);
        align-items: center;

        &:has(:focus-visible) {
            outline-color: var(--color-lila);
            outline-width: 2px;
            outline-style: dashed;
            outline-offset: 4px;
        }
    }

    .editor-checkbox {
        transform: scale(1.25);
        accent-color: var(--color-lila);
    }

    .editor-checkbox-label {
        font-size: 0.875rem;
        font-weight: 500;

        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:is(.editor-checkbox-container:where(:hover, :has(:checked)) *) {
            color: var(--color-lila);
        }

        &:is(.editor-checkbox-container:is(:has(:disabled)) *) {
            color: var(--color-gris3);
        }
    }

    .editor-note-tracker {
        margin-block-start: calc(var(--spacing) * 6);
        color: var(--color-error);
        font-size: 0.875rem;
        list-style-position: outside;
        list-style-type: disc;
        padding-inline-start: calc(var(--spacing) * 6);

        > li {
            margin-block-end: calc(var(--spacing) * 1.5);

            &:not(:has(+ li)) {
                margin-block-end: 0;
            }
        }
    }

    .editor-dropdown-container {
        display: flex;
        column-gap: calc(var(--spacing) * 1.5);
        align-items: center;
    }

    .editor-dropdown-label {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25;
    }

    .anotacion {
        position: relative;
        &:has(> .ProseMirror-trailingBreak)::before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: max-content;
            content: "Texto descriptivo...";
            color: var(--color-gris3);
        }
    }

    .contenedor-pdf {
        width: 100%;
        max-width: 1200px;
        margin-inline: auto;
        display: block;

        &:where(* + &) {
            margin-block-start: calc(var(--spacing) * 6);
        }

        &:has(+ *) {
            margin-block-end: calc(var(--spacing) * 6);
        }

        &[data-orientation="vertical"] {
            aspect-ratio: 8.5 / 11;
        }

        &[data-orientation="horizontal"] {
            aspect-ratio: 11 / 8.5;
        }
    }

    .editor-input {
        border-width: 1px;
        border-color: var(--color-gris3);
        border-radius: var(--radius-md);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 1.5);
        font-size: 0.875rem;
        line-height: 0;
        min-width: 0;
        width: 100%;

        &::placeholder {
            color: var(--color-gris4);
        }

        &:focus-visible {
            border-color: var(--color-lila);
        }
    }

    .editor-buttons-container {
        display: flex;
        column-gap: calc(var(--spacing) * 4);
        row-gap: calc(var(--spacing) * 3);
        align-items: center;
        justify-content: start;
        grid-column: 1 / -1;
    }

    .editor-button {
        background-color: var(--color-violeta);
        color: var(--color-blanco);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 0.5);
        border-radius: vaR(--radius-redondo);
        border-width: 2px;
        border-color: var(--color-violeta);
        font-size: 0.75rem;
        font-weight: 500;

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-blanco);
                color: var(--color-negro);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            background-color: var(--color-blanco);
            color: var(--color-negro);
        }

        &:disabled {
            background-color: var(--color-gris2);
            color: var(--color-negro);
            border-color: var(--color-gris2);
        }
    }

    .editor-dropdown {
        background-color: var(--color-blanco);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 1.5);
        font-size: 0.875rem;
        border-radius: var(--radius-md);
        border-color: var(--color-gris3);
        border-width: 1px;
        min-width: 0;

        &:where(.editor-dialog *) {
            width: 100%;
        }

        &:disabled {
            background-color: var(--color-gris2);
            cursor: not-allowed;
        }
    }

    .editor-area {
        border-radius: var(--radius-md);
        border-width: 1px;
        border-color: var(--color-gris3);
        border-style: solid;
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 5);
        max-height: 20rem;
        overflow-y: auto;
    }

    a[data-type] {
        display: inline-block;
        text-indent: 0;

        .ProseMirror {
            display: inline-block;
            min-width: 0.5rem;
            /*padding-inline: 5px;*/
            border-style: dashed;
            border-width: 1px;
            border-color: var(--color-lila);

            &:empty::before {
                pointer-events: none;
                color: var(--color-gris3);
                content: "Texto de nota...";
            }

            &:where(.ProseMirror *) {
                padding-inline: 2px;
            }
        }

        &::after {
            vertical-align: text-top;
            color: var(--color-azul);
            font-weight: 500;
        }
    }

    a[data-type="autor"] {
        &::after {
            counter-increment: notas-autor-counter;
            content: counter(notas-autor-counter, notas-autor);
            font-variant-position: super;
            margin-left: calc(var(--spacing) * 0.5);
            font-size: 11px;
            line-height: 0.8;
            vertical-align: super;
        }
    }

    a[data-type="editor"] {
        &::after {
            counter-increment: notas-editor-counter;
            content: counter(notas-editor-counter);
            font-variant-position: super;
            margin-left: calc(var(--spacing) * 0.5);
            font-size: 11px;
            line-height: 0.8;
            vertical-align: super;
        }
    }

    .cita {
        padding-left: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 2);
        margin-block-start: calc(var(--spacing) * 2);

        &::before {
            width: calc(var(--spacing) * 1.5);
            height: 100%;
            background-color: var(--color-gris3);
        }
    }

    .tabla {
        border-collapse: collapse;
        table-layout: auto;
        margin-inline: auto;

        &:has(+ *) {
            margin-block-end: calc(var(--spacing) * 6);
        }

        &:where(* + &) {
            margin-block-start: calc(var(--spacing) * 6);
        }

        td, th {
            border-width: 1px;
            border-color: var(--color-gris3);
            padding-inline: calc(var(--spacing) * 6);
            padding-block: calc(var(--spacing) * 2);
        }

        th {
            background-color: var(--color-gris2);
        }
    }

    .hr-decorado {
        position: relative;
        overflow: visible;

        &::before {
            content: url("../images/favicon-32x32.png");
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            top: -16px;
        }
    }

    .embed {
        margin-inline: auto;
        width: 100%;
        max-width: 1200px;
        margin-block: calc(var(--spacing) * 4);
        display: block;

        aspect-ratio: 16 / 9;
    }

    .selectedCell {
        position: relative;

        &::after {
            z-index: 2;
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(
                200,
                200,
                255,
                0.4
                );
            pointer-events: none;
        }
    }

    .ProseMirror {
        white-space: pre-wrap;
        word-break: break-word;
    }

    .acordeon div.ProseMirror {
        width: 100%;
    }

    .ProseMirror-gapcursor {
        pointer-events: none;

        &::after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            border-left: 1px solid var(--color-negro);
            height: 1rem;
            margin-left: -0.5px;
        }
    }

    .ProseMirror-selectednode {
        outline-width: 3px;
        outline-offset: 6px;
        outline-style: dashed;
        outline-color: var(--color-azul);
    }

    /* || Estilos del contenedor de obra aleatoria (Prueba tu suerte). */

    .poema-aleatorio {
        background-color: var(--color-verde);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 8);
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        align-items: center;
    }

    /* || Estilos de la sección /obra.xhtml */

    .obra-autor-contenedor {
        padding-block-start: calc(var(--spacing) * 2);
    }

    .obra-autor-ficha {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 6);
        column-gap: calc(var(--spacing) * 8);
        align-items: safe start;

        &:where(.obra-autor-contenedor > *:first-of-type) {
            padding-block-start: 0;
        }
    }

    .obra-autor-foto {
        width: 200px;
    }

    .obra-autor-nombre {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 600;
    }

    .obra-autor-lapso {
        text-transform: none;
        font-size: 17px;
    }

    .obra-portada {
        max-width: 250px;
    }

    .obra-autor-liga {
        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
        }

        @container (width < 960px) {
            display: inline-block;
            text-align: center;
        }
    }

    .obra-acciones {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr;
        row-gap: calc(var(--spacing) * 4);
        max-width: 650px;
        margin-inline: auto;

        @container (width >= 400px) {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, auto);
        }
    }

    .obra-envolvente-accion {
        display: flex;
        align-items: safe start;
        justify-content: safe center;
        text-align: center;

        &.imprimir:is(:where(.no-js) *) {
            display: none;
        }

        @container (width >= 400px) {
            &.anterior {
                justify-content: safe start;
            }

            &.imprimir {
                justify-content: safe center;
                grid-column: 2 / span 1;
            }

            &.siguiente {
                justify-content: safe end;
            }

            &.otros {
                justify-content: safe center;
            }
        }
    }

    .vista-preliminar, [data-toggle-element="alternante"][aria-expanded="false"] {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .etiqueta-alternador {
        &.oculta {
            display: none;
        }

        &:where([data-toggle-element="alternador"][aria-pressed="true"] *) {
            display: none;

            &.oculta {
                display: inline;
            }
        }
    }
}

@layer index {
    .index-seccion {
        display: flex;
        flex-direction: row;

        @media (width < 960px) {
            flex-direction: column;
        }
    }

    .titulo-imagen {
        width: 200px;
        max-width: 100%;

        &.san-lunes {
            width: 150px;
        }

        &.autores {
            width: 140px;
        }
    }

    .contenedor-san-lunes {
        row-gap: calc(var(--spacing) * 5);

        @media (width >= 960px) {
            max-width: 720px;
            margin-left: auto;
        }
    }

    .contenedor-buscador-index {
        @media (width >= 960px) {
            max-width: 480px;
            margin-right: auto;
        }
    }

    .contenedor-introduccion {
        @media (width >= 960px) {
            max-width: 720px;
            margin-left: auto;
        }
    }

    .contenedor-poema-index {
        max-width: 480px;
        margin-right: auto;
        row-gap: calc(var(--spacing) * 5);
        height: 100%;
    }

    .index-parrafo-introduccion {
        font-size: var(--size-parrafo);
    }

    .index-parrafo-san-lunes {
        color: var(--color-blanco);
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
    }

    .index-cita {
        font-size: var(--size-cita);
        display: flex;
        column-gap: calc(var(--spacing) * 2);
        margin-block: calc(var(--spacing) * 4);
    }

    .index-cita-comillas {
        display: flex;
        align-items: start;

        &.cierre {
            align-items: end;
        }
    }

    .index-comilla-img {
        display: inline-block;
        width: 15px; /*25px;*/
        margin-bottom: 10px;

        &.apertura {
            margin-right: 5px;
        }

        &.cierre {
            margin-left: 5px;
        }
    }

    .index-contenedor-busqueda {
        display: flex;
        justify-content: center;
        align-items: start;

        &.aleatorio {
            align-items: center;
        }
    }

    .index-formulario-busqueda {
        row-gap: calc(var(--spacing) * 4);
        justify-content: center;
        align-items: start;
        width: 100%;

        @media (width < 960px) {
            align-items: safe start;
            max-width: 550px;
        }
    }

    .index-carrusel {
        width: 100%;

        &:defined {
            display: grid;
            grid-template-columns: auto minmax(auto, 100%) auto;
            grid-auto-rows: auto;
            container-type: inline-size;
        }
    }

    .index-carrusel-flecha {
        &:is(:where(.index-carrusel):defined *) {
            display: flex;
            align-items: safe center;
            justify-content: safe center;
            color: var(--color-gris3);
            font-size: 3.5rem;
            line-height: initial;

            @media (hover: hover) {
                &:hover {
                    color: var(--color-violeta);
                }
            }

            &:focus-visible {
                outline-color: var(--color-violeta);
                background-color: var(--color-gris1);
            }
        }

        @container (width < 500px) {
            &[data-carousel-action="anterior"] {
                grid-column: 1 / 1;
                grid-row: 2 / 2;
            }

            &[data-carousel-action="siguiente"] {
                grid-column: 3 / 3;
                grid-row: 2 / 2;
            }
        }
    }

    .index-carrusel-reel {
        overflow-x: auto;
        container-type: inline-size;
        width: 100%;
        display: flex;

        &:focus-visible {
            outline-color: var(--color-negro);
        }

        &:is(:where(.index-carrusel):defined *) {
            scroll-behavior: smooth;
            overflow: hidden;
        }

        @container (width < 500px) {
            grid-column: 1 / -1;
        }
    }

    .index-carrusel-contenedor-controles {
        &:is(:where(.index-carrusel):defined *) {
            display: flex;
            align-items: safe center;
            justify-content: safe center;
            overflow: hidden;
            padding-inline: calc(var(--spacing) * 2);
        }

        @container (width >= 500px) {
            grid-column: 1 / -1
        }

        @container (width < 500px) {
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
        }
    }

    .index-carrusel-controles {
        display: flex;
        column-gap: calc(var(--spacing) * 4);
        align-items: safe center;
        justify-content: safe center;
        max-width: 100%;
        position: relative;
    }

    .index-carrusel-pausa {
        display: flex;
        align-items: safe center;
        justify-content: safe center;
        padding-inline: calc(var(--spacing) * 1.75);
        padding-block: calc(var(--spacing) * 0.75);
        border-radius: var(--radius-md);
        background-color: var(--color-lila);
        color: var(--color-blanco);
        font-size: 16px;

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-violeta);
            }
        }

        &:focus-visible {
            outline-color: var(--color-lila);
        }

        &[aria-pressed="true"] {
            background-color: var(--color-violeta);
        }
    }

    .index-carrusel-contenedor-puntos {
        display: flex;
        column-gap: calc(var(--spacing) * 2.5);
        align-items: safe center;
        justify-content: safe start;
        overflow-x: auto;
    }

    .index-carrusel-punto {
        border-radius: var(--radius-redondo);
        aspect-ratio: 1 / 1;
        width: 1rem;
        background-color: var(--color-gris4);
        flex-shrink: 0;

        &:disabled {
            display: none;
        }

        &[aria-pressed="true"] {
            background-color: var(--color-violeta);
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
        }

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-lila);
            }
        }
    }

    .index-carrusel-ficha {
        flex-shrink: 0;
        width: 100%;
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 4);
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        align-items: center;

        @container (width >= 640px) {
            width: 50%;
        }

        @container (width >= 960px) {
            width: 33.33%;
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: -3px;
        }
    }

    .index-carrusel-ficha-imagen {
        width: 200px;
        transition: transform 0.3s linear;

        &:is(:where(.index-carrusel-ficha):hover *) {
            transform: scale(1.0625);
        }
    }

    .index-carrusel-ficha-titulo {
        text-align: center;
    }
}

/*@layer poema {
  .poema-despliegue-autor {
    font-size: 22px;
    color: var(--color-lila);
    margin-bottom: calc(var(--spacing) * 4.6);
    font-weight: 500;
  }

  .poema-despliegue-titulo {
    color: var(--color-violeta);
    font-size: 30px;
    margin-bottom: calc(var(--spacing) * 1.176);
    font-weight: 600;
  }

  .poema-despliegue-titulo-adicional {
    font-size: 22px;
    font-weight: 500;
    color: var(--color-lila);
  }

  .poema-liga-referencia {
    text-decoration: none;
    color: var(--color-azul);
    font-size: 11px;

    @media (hover: hover) {
      &:hover {
        color: var(--color-violeta);
        text-decoration-color: var(--color-violeta);
      }
    }

    &:focus-visible {
      outline-color: var(--color-violeta);
    }
  }

  .poema-epigrafe {
    line-height: 23px;
    font-size: 15px;
    margin-block: calc(var(--spacing) * 12);
  }

  .poema-titulo-seccion {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 500;
  }

  .poema-parrafo {
    margin-bottom: 20px;
    line-height: 28px;
  }

  .poema-cita {
    font-weight: 400;
    line-height: 24px;
    font-size: 14px;
  }

  .poema-titulo-notas {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .poema-nota {
    padding-left: 25px;
    text-indent: -25px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 19px;
  }
}*/

@layer equipo {
    .equipo-titulo {
        font-weight: 600;
        color: var(--color-violeta);
        font-size: 30px;
        margin-bottom: calc(var(--spacing) * 10);
    }

    .equipo-envolvente-fichas {
        width: 100%;

        &:has(+ .equipo-envolvente-fichas) {
            margin-bottom: calc(var(--spacing) * 8);
        }
    }

    .equipo-ficha {
        display: flex;
        flex-direction: column-reverse;
        row-gap: calc(var(--spacing) * 6);
        margin-bottom: calc(var(--spacing) * 10);

        &:last-of-type {
            margin-bottom: 0 !important;
        }

        @container (width >= 640px) {
            flex-direction: row;
        }
    }

    .equipo-ficha-contenedor-foto {
        display: flex;
        align-items: center;
        justify-content: center;

        @container (width >= 640px) {
            width: 250px;
        }
    }

    .equipo-ficha-foto {
        display: block;
        width: 180px;
        max-width: 100%;
    }

    .equipo-ficha-informacion {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 8);
        justify-content: safe center;

        @container (width >= 640px) {
            justify-content: safe start;
            width: calc(100cqi - 250px);
        }
    }

    .equipo-ficha-nombre {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.125;
    }

    .equipo-ficha-funcion {
        color: var(--color-lila);
        font-size: 18px;
        font-weight: 600;
    }

    .equipo-dos-columnas {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: calc(var(--spacing) * 13);
        column-gap: calc(var(--spacing) * 10);
        container-type: inline-size;

        @container (width >= 600px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .equipo-dos-columnas-ficha {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: safe start;
        row-gap: calc(var(--spacing) * 6);
    }

    .equipo-dos-columnas-ficha-foto {
        display: block;
        width: 150px;
    }
    
    .equipo-titular {
        color: var(--color-lila);
        font-size: 22px;
        font-weight: 600;
        margin-block-end: calc(var(--spacing) * 2);
    }
    
    .equipo-lista {
        list-style-type: none;
        list-style-position: outside;
        font-weight: 500;
        
        > li:not(:last-child) {
            margin-bottom: calc(var(--spacing) * 0.5);
        }
        
        &:where(.seccion-despliegue *):not(:last-of-type) {
            margin-bottom: calc(var(--spacing) * 10);
        }
    }
}

@layer acerca {
    .novedades-ficha {
        display: flex;
        width: 100%;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 6);
        align-items: safe start;
        padding-block-start: calc(var(--spacing) * 4);
        padding-inline: calc(var(--spacing) * 3);

        &:has(+ .novedades-ficha) {
            padding-block-end: calc(var(--spacing) * 10);
            border-bottom-width: 1px;
            border-bottom-color: var(--color-gris3);
        }
    }

    .novedad-informacion {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 6);
        align-items: safe start;
        width: 100%;
    }

    .novedad-portada-liga {
        display: block;
    }

    .novedad-portada {
        width: 180px;
        box-shadow: 8px 14px 21px -2px var(--color-gris3);
    }

    .novedad-titulo {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.125;
    }

    .novedad-autor {
        font-weight: 600;
        font-size: 15px;
    }

    .novedad-texto {
        font-size: 16px;
        width: 100%;
        max-width: 550px;
        font-weight: 400;

        /*@container (width < 960px) {
          text-align: center;
        }*/
    }
}

@layer poeta {
    .autor-mas {
        @container (width < 960px) {
            order: 2;
        }
    }

    .autor-lateral {
        @container (width < 960px) {
            order: 3;
        }
    }

    .poeta-informacion {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
    }

    .poeta-foto-contenedor {
        position: static !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    .poeta-foto {
        display: block;
        width: 180px !important;
        position: static !important;
    }

    .poeta-periodo {
        font-size: 24px;
        color: var(--color-lila);
        font-weight: 600;
    }
}

@layer opticas {
    .antologias-contenedor {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: calc(var(--spacing) * 20);
        column-gap: calc(var(--spacing) * 10);

        @container (width >= 620px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .antologia-ficha {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 8);
        align-items: safe start;
    }

    .antologia-ficha-portada {
        display: block;
        width: 180px;
        box-shadow: 8px 14px 21px -2px var(--color-gris3);
    }
}

@layer afinidades {
    .afinidades-contenedor {
        display: flex;
        flex-direction: column;
    }

    .afinidad-ficha {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        align-items: safe start;

        &:not(:first-of-type) {
            padding-block-start: calc(var(--spacing) * 8);
        }

        &:has(+ .afinidad-ficha) {
            padding-block-end: calc(var(--spacing) * 10);
            border-color: var(--color-gris3);
            border-bottom-width: 1px;
        }
    }

    .afinidad-ficha-titulo {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.125;
    }
}

@layer eventos {
    .eventos-contenedor {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 8);

        @container (width >= 600px) {
            flex-direction: row;
            column-gap: calc(var(--spacing) * 8);
        }
    }

    .eventos-anios-contenedor {
        display: flex;
    }

    .eventos-anios-menu {
        flex-direction: row;
        border-color: var(--color-gris2);
        border-block-end-width: 1px;

        @container (width >= 600px) {
            flex-direction: column;
            border-block-end-width: 0;
            border-inline-end-width: 1px;
        }
    }

    .eventos-anio-opcion {
        font-size: 20px;
        font-weight: 500;
        display: block;
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 3);

        @media (hover: hover) {
            &:hover {
                color: var(--color-violeta);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: -2px;
        }

        &[aria-current="page"] {
            background-color: var(--color-lila);
            color: var(--color-blanco);
        }
    }

    .eventos-fichas-contenedor {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .evento-ficha {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 6);
        column-gap: calc(var(--spacing) * 8);
        align-items: safe start;

        &:where(.eventos-fichas-contenedor > *:first-of-type) {
            padding-block-start: calc(var(--spacing) * 2);
        }

    }

    .evento-imagen {
        flex-shrink: 0;
        width: 100%;
        max-width: 350px;
        box-shadow: 8px 14px 21px -2px var(--color-gris3);

        @container (width <  450px) {
            display: none;
        }
    }

    .evento-titulo {
        font-size: 22px;
        line-height: 1.125;
        font-weight: 500;
    }

    .evento-data-container {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing));

        @container (width >= 450px)  {
            flex-direction: row;
            column-gap: calc(var(--spacing) * 5);
        }
    }

    .evento-informacion {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 6);
        align-items: start;
        flex-grow: 1;
    }

    .evento-lista {
        font-size: 16px;
    }

    .evento-descriptor {
        font-weight: 600;
    }
}

@layer autores {
    .autor-ficha {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 2);
        align-items: safe start;

        @container (width >= 400px) {
            flex-direction: row;
            column-gap: calc(var(--spacing) * 8);
        }
    }

    .autor-ficha-foto {
        width: 150px;
        display: block;
    }

    .autor-ficha-informacion {
        display: flex;
        flex-direction: column;
        align-items: safe start;
        row-gap: calc(var(--spacing) * 5);
    }
}

@layer indice {
    .indice-ficha {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
    }

    .indice-ficha-titulo {
    }

    .indice-lista-autores {
        list-style-type: none;
    }
}

@layer buscador {
    .buscador-seccion-filtros {
        width: 100%;
        padding-inline: calc(var(--spacing) * 6);
    }

    .buscador-envolvente {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
    }

    .buscador-formulario {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        align-items: safe center;
        justify-content: safe start;
        row-gap: calc(var(--spacing) * 16);
        column-gap: calc(var(--spacing) * 12);
        border-bottom-width: 1px;
        padding-block-end: calc(var(--spacing) * 8);
        border-bottom-color: var(--color-gris3);

        @container (width >= 640px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @container (width >= 960px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .buscador-resultados {
        border-bottom-width: 1px;
        border-bottom-color: var(--color-gris3);
        padding-block: calc(var(--spacing) * 4);
    }

    .buscador-contenedor-resultados {
        border-top-width: 0;
    }

    .buscador-envolvente {
        row-gap: 0;
    }
}

// Probablemente hay que eliminar gran parte de los estilos.
@layer pf_obra {
    .poema-acciones {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr;
        row-gap: calc(var(--spacing) * 4);
        max-width: 650px;
        margin-inline: auto;

        @container (width >= 600px) {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, auto);
        }
    }

    .poema-envolvente-accion {
        display: flex;
        align-items: safe start;
        justify-content: safe center;
        text-align: center;

        &.imprimir:is(:where(.no-js) *) {
            display: none;
        }

        @container (width >= 600px) {
            &.anterior {
                justify-content: safe start;
            }

            &.imprimir {
                justify-content: safe center;
                grid-column: 2 / span 1;
            }

            &.siguiente {
                justify-content: safe end;
            }

            &.otros {
                justify-content: safe center;
            }
        }
    }

    .poema-autor-contenedor {
        padding-block-start: calc(var(--spacing) * 2);
    }

    .poema-autor-foto {
        width: 200px;
    }

    .poema-autor-nombre {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 600;
    }

    .poema-autor-liga {
        @media (hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &:focus-visible {
            outline-color: var(--color-violeta);
        }

        @container (width < 960px) {
            display: inline-block;
            text-align: center;
        }
    }

    .poema-aleatorio {
        background-color: var(--color-verde);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 8);
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        align-items: center;
    }

    .poema-titulo-saber-mas {
        text-transform: uppercase;
        color: var(--color-violeta);
        font-size: 30px;
        margin-bottom: calc(var(--spacing) * 6);
        font-weight: 600;
    }

    .obra-coleccion-pdf {
        width: 100%;
        aspect-ratio: 8.5 / 11;
        margin-block-start: calc(var(--spacing) * 4);
    }
}

@layer pf_acordeon {
    .acordeon-titulo {
        border-bottom-color: var(--color-gris3) !important;
        border-bottom-width: 2px !important;
        border-bottom-style: solid !important;
        font-size: 24px !important;
        display: flex !important;
        column-gap: calc(var(--spacing) * 4);
        justify-content: space-between;
        align-items: safe center;
        padding: calc(var(--spacing) * 4.5) calc(var(--spacing) * 4) !important;
        font-weight: 600;

        @media(hover: hover) {
            &:hover {
                color: var(--color-lila);
            }
        }

        &::after {
            content: "\E3D4";
            font-family: var(--font-phosphor-bold);
        }
    }

    .acordeon-contenido {
        padding-block: calc(var(--spacing) * 6);
        padding-inline: calc(var(--spacing) * 4.5);
    }

    .poema-acordeon-titulo {
        border-bottom-color: var(--color-gris3);
        border-bottom-width: 2px;
        font-size: 24px;

        &:target, &:has([aria-expanded="true"]) {
            color: var(--color-violeta);
        }

        @media (hover: hover) {
            &:hover {
                color: var(--color-violeta);
            }
        }
    }

    .poema-acordeon-titulo-liga {
        display: flex;
        column-gap: calc(var(--spacing) * 4);
        justify-content: space-between;
        align-items: safe center;
        padding-inline: calc(var(--spacing) * 4.5);
        padding-block: calc(var(--spacing) * 4);

        &:focus-visible {
            outline-color: var(--color-violeta);
            outline-offset: -2px;
        }
    }

    .poema-acordeon-etiqueta {
        font-weight: 600;
    }

    .poema-acordeon-mas {
        display: inline-block;

        &:is(:where(.poema-acordeon-titulo):where(:target, :has([aria-expanded="true"])) *) {
            display: none;
        }
    }

    .poema-acordeon-menos {
        display: none;

        &:is(:where(.poema-acordeon-titulo):where(:target, :has([aria-expanded="true"])) *) {
            display: inline-block;
        }
    }

    .poema-acordeon-contenido {
        padding-block: calc(var(--spacing) * 6);
        padding-inline: calc(var(--spacing) * 4.5);
        display: none;

        &:is(:where(.poema-acordeon-titulo:where(:target, :has([aria-expanded="true"]))) + *) {
            display: block;
        }
    }
}