/* ============================================================
   NAVEGADOR CONTEXTUAL — APLICACIONES WEB
   VERSIÓN HORIZONTAL COMPACTA
============================================================ */

.dmxApplicationNavigator {

    position: fixed;

    right:
        clamp(18px, 2vw, 32px);

    bottom:
        clamp(26px, 4vh, 48px);

    z-index: 80;

    width:
        min(760px, calc(100vw - 40px));

    opacity: 0;
    visibility: hidden;

    translate:
        0
        18px;

    pointer-events: none;

    transition:
        opacity 320ms ease,
        visibility 320ms ease,
        translate 420ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.dmxApplicationNavigator.is-visible {

    opacity: 1;
    visibility: visible;

    translate:
        0
        0;

}


/* ============================================================
   PANEL
============================================================ */

.dmxApplicationNavigatorPanel {

    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        auto
        minmax(120px, 0.8fr)
        minmax(360px, 1.5fr);

    align-items: center;

    gap: 18px;

    overflow: hidden;

    padding:
        12px
        14px;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(13, 18, 30, 0.54),
            rgba(20, 27, 43, 0.48)
        );

    box-shadow:
        0 18px 48px rgba(8, 13, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    pointer-events: auto;

    transition:
    background .45s cubic-bezier(.22,1,.36,1),
    border-color .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    transform .45s cubic-bezier(.22,1,.36,1);

    animation:
    dmxNavigatorFloat
    7s
    ease-in-out
    infinite;

}

.dmxApplicationNavigatorPanel:hover,
.dmxApplicationNavigatorPanel:focus-within{

    background:
        linear-gradient(
            135deg,
            rgba(13,18,30,.96),
            rgba(20,27,43,.94)
        );

    border-color:
        rgba(115,132,255,.26);

    box-shadow:
        0 30px 70px rgba(8,13,24,.30),
        0 0 45px rgba(95,115,255,.10),
        inset 0 1px 0 rgba(255,255,255,.08);

    transform:
        translateY(-4px)
        scale(1.015);

}


.dmxApplicationNavigatorPanel::before {

    content: "";

    position: absolute;

    top: -90px;
    right: -40px;

    z-index: -1;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(94, 111, 255, 0.16);

    filter:
        blur(60px);

    pointer-events: none;

}


.dmxApplicationNavigatorPanel::after {

    content: "";

    position: absolute;

    left: 30%;
    bottom: -120px;

    z-index: -1;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background:
        rgba(70, 214, 183, 0.08);

    filter:
        blur(70px);

    pointer-events: none;

}


/* ============================================================
   PROGRESO
============================================================ */

.dmxApplicationNavigatorProgress {

    display: grid;

    gap: 7px;

    min-width: 72px;

}


.dmxApplicationNavigatorPosition {

    display: flex;
    align-items: baseline;

    gap: 5px;

    color:
        rgba(255, 255, 255, 0.34);

    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.08em;

}


.dmxApplicationNavigatorPosition strong {

    color: #ffffff;

    font-size: 0.88rem;
    font-weight: 760;

    letter-spacing: -0.02em;

}


.dmxApplicationNavigatorPosition small {

    color:
        rgba(255, 255, 255, 0.42);

    font-size: inherit;
    font-weight: inherit;

}


.dmxApplicationNavigatorProgressTrack {

    position: relative;

    display: block;

    width: 72px;
    height: 3px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.08);

}


.dmxApplicationNavigatorProgressValue {

    position: absolute;
    inset:
        0
        auto
        0
        0;

    display: block;

    width:
        var(--dmx-page-navigation-progress, 14.2857%);

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6f7cff,
            #56dec0
        );

    box-shadow:
        0 0 14px rgba(100, 123, 255, 0.35);

    transition:
        width 420ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ============================================================
   SECCIÓN ACTUAL
============================================================ */

.dmxApplicationNavigatorCurrent {

    display: grid;

    gap: 3px;

    min-width: 0;

    padding:
        0
        18px;

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    border-right:
        1px solid rgba(255, 255, 255, 0.08);

}


.dmxApplicationNavigatorCurrent > span {

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 0.58rem;
    font-weight: 750;

    letter-spacing: 0.13em;
    text-transform: uppercase;

}


.dmxApplicationNavigatorCurrent > strong {

    overflow: hidden;

    color: #ffffff;

    font-size:
        clamp(0.88rem, 1vw, 1rem);

    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -0.02em;

    text-overflow: ellipsis;
    white-space: nowrap;

}


/* ============================================================
   CONTROLES
============================================================ */

.dmxApplicationNavigatorControls {

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

    gap: 8px;

}


.dmxApplicationNavigatorButton {

    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        32px
        minmax(0, 1fr);

    align-items: center;

    gap: 9px;

    min-height: 48px;

    overflow: hidden;

    padding:
        7px
        9px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.035);

    color: #ffffff;

    text-decoration: none;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease,
        opacity 220ms ease;

}


.dmxApplicationNavigatorButton::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    opacity: 0;

    background:
        linear-gradient(
            120deg,
            rgba(100, 115, 255, 0.13),
            rgba(75, 214, 184, 0.05)
        );

    transition:
        opacity 220ms ease;

}


.dmxApplicationNavigatorButton:hover {

    transform:translateY(-2px);

    border-color:
        rgba(118, 132, 255, 0.24);

    background:
        rgba(255, 255, 255, 0.06);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.16);

}


.dmxApplicationNavigatorButton:hover::before {

    opacity: 1;

}


.dmxApplicationNavigatorButton:focus-visible {

    outline:
        3px solid rgba(118, 132, 255, 0.42);

    outline-offset: 3px;

}


/* ============================================================
   SIGUIENTE
============================================================ */

.dmxApplicationNavigatorButtonNext {

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

    text-align: right;

}


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

.dmxApplicationNavigatorButtonIcon {

    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.045);

    color: #aeb6ff;

    transition:
        transform 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease;

}


.dmxApplicationNavigatorButton:hover
.dmxApplicationNavigatorButtonIcon {

    color: #ffffff;

    border-color:
        rgba(119, 133, 255, 0.24);

    background:
        rgba(108, 123, 255, 0.1);

}


.dmxApplicationNavigatorButtonPrevious:hover
.dmxApplicationNavigatorButtonIcon {

    transform:
    translateY(-3px)
    scale(1.02);

}


.dmxApplicationNavigatorButtonNext:hover
.dmxApplicationNavigatorButtonIcon {

    transform:
        translateX(2px);

}


.dmxApplicationNavigatorButtonIcon svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.75;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* ============================================================
   TEXTO
============================================================ */

.dmxApplicationNavigatorButtonContent {

    display: grid;

    gap: 2px;

    min-width: 0;

}


.dmxApplicationNavigatorButtonContent small {

    color:
        rgba(255, 255, 255, 0.34);

    font-size: 0.55rem;
    font-weight: 750;

    letter-spacing: 0.11em;
    text-transform: uppercase;

}


.dmxApplicationNavigatorButtonContent strong {

    overflow: hidden;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.18;

    text-overflow: ellipsis;
    white-space: nowrap;

    transition:
        color 220ms ease;

}


.dmxApplicationNavigatorButton:hover
.dmxApplicationNavigatorButtonContent strong {

    color: #ffffff;

}


/* ============================================================
   DESACTIVADO
============================================================ */

.dmxApplicationNavigatorButton.is-disabled,
.dmxApplicationNavigatorButton[aria-disabled="true"] {

    opacity: 0.28;

    cursor: default;

    pointer-events: none;

}


.dmxApplicationNavigatorButton.is-disabled::before,
.dmxApplicationNavigatorButton[aria-disabled="true"]::before {

    display: none;

}


/* ============================================================
   CAMBIO DE CONTENIDO
============================================================ */

.dmxApplicationNavigator.is-updating
.dmxApplicationNavigatorCurrent strong,

.dmxApplicationNavigator.is-updating
.dmxApplicationNavigatorButtonContent strong,

.dmxApplicationNavigator.is-updating
.dmxApplicationNavigatorPosition strong {

    animation:
        dmxApplicationNavigatorTextChange
        320ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;

}


@keyframes dmxApplicationNavigatorTextChange {

    0% {

        opacity: 1;

        transform:
            translateY(0);

    }

    45% {

        opacity: 0;

        transform:
            translateY(5px);

    }

    46% {

        opacity: 0;

        transform:
            translateY(-5px);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .dmxApplicationNavigator {

        right: 14px;
        bottom: 18px;

        width:
            min(650px, calc(100vw - 28px));

    }


    .dmxApplicationNavigatorPanel {

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

        gap: 12px;

    }


    .dmxApplicationNavigatorCurrent {

        display: none;

    }


    .dmxApplicationNavigatorControls {

        grid-column: 2;

    }

}


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

@media (max-width: 720px) {

    .dmxApplicationNavigator {

        right: 8px;
        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            );
        left: 8px;

        width: auto;

    }


    .dmxApplicationNavigatorPanel {

        grid-template-columns:
            1fr;

        gap: 8px;

        padding:
            9px;

        border-radius: 16px;

    }


    .dmxApplicationNavigatorProgress {

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

        align-items: center;

        gap: 8px;

        min-width: 0;

    }


    .dmxApplicationNavigatorProgressTrack {

        width: 100%;

    }


    .dmxApplicationNavigatorControls {

        grid-column: 1;

        gap: 6px;

    }


    .dmxApplicationNavigatorButton {

        min-height: 43px;

        padding:
            6px
            8px;

    }


    .dmxApplicationNavigatorButtonIcon {

        width: 29px;
        height: 29px;

    }


    .dmxApplicationNavigatorButtonContent strong {

        font-size: 0.68rem;

    }

}


/* ============================================================
   EVITAR QUE CUBRA CONTENIDO EN MÓVIL
============================================================ */

@media (max-width: 720px) {

    body:has(
        .dmxApplicationNavigator.is-visible
    ) {

        padding-bottom:
            84px;

    }

}


@supports not selector(body:has(*)) {

    @media (max-width: 720px) {

        body {

            padding-bottom:
                84px;

        }

    }

}


/* ============================================================
   MOVIMIENTO REDUCIDO
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .dmxApplicationNavigator,
    .dmxApplicationNavigatorPanel,
    .dmxApplicationNavigatorProgressValue,
    .dmxApplicationNavigatorButton,
    .dmxApplicationNavigatorButton::before,
    .dmxApplicationNavigatorButtonIcon,
    .dmxApplicationNavigatorButtonContent strong {

        transition: none;

    }


    .dmxApplicationNavigator.is-updating
    .dmxApplicationNavigatorCurrent strong,

    .dmxApplicationNavigator.is-updating
    .dmxApplicationNavigatorButtonContent strong,

    .dmxApplicationNavigator.is-updating
    .dmxApplicationNavigatorPosition strong {

        animation: none;

    }


    .dmxApplicationNavigatorButton:hover {

        transform: none;

    }

}
.dmxApplicationNavigatorButton{

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background-color .35s,
        border-color .35s,
        box-shadow .35s;

}
.dmxApplicationNavigatorProgressValue{

    overflow:hidden;

}
.dmxApplicationNavigatorProgressValue::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:
        translateX(-120%);

}
.dmxApplicationNavigatorPanel:hover
.dmxApplicationNavigatorProgressValue::after{

    animation:
        dmxNavigatorShine
        1.2s
        ease;

}
@keyframes dmxNavigatorShine{

    to{

        transform:
            translateX(120%);

    }

}
.dmxApplicationNavigatorCurrent strong{

    transition:
        letter-spacing .3s,
        color .3s,
        transform .35s;

}
.dmxApplicationNavigatorPanel:hover
.dmxApplicationNavigatorCurrent strong{

    letter-spacing:
        -.015em;

    transform:
        translateX(2px);

}
@keyframes dmxNavigatorFloat{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-4px);

    }

}
.dmxApplicationNavigatorPanel:hover{

    animation-play-state:
        paused;

}