/* ==========================================================================
   ONIRIC MOBILE NAVIGATION
   Añadir a: frontend/web/css/oniric-mobile-nav.css
   ========================================================================== */

:root {
    --oniric-mobile-nav-duration: 680ms;
    --oniric-mobile-nav-easing: cubic-bezier(.5, .5, 0, 1);
    --oniric-mobile-nav-header-height: 8.5rem;
    --oniric-mobile-nav-side: 1.5rem;
    --oniric-mobile-nav-button-size: 3rem;
    --oniric-mobile-nav-panel-width: min(16rem, calc(100vw - 3rem));	
	--oniric-mobile-nav-panel-height: min(34rem, calc(100dvh - 4.5rem));
    --oniric-mobile-nav-white: #f1f1ee;
    --oniric-mobile-nav-black: #2d2926;
}

.oniric-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1085;
    pointer-events: none;
}

.oniric-mobile-nav__header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--oniric-mobile-nav-header-height);
    padding: 1.5rem var(--oniric-mobile-nav-side);
    pointer-events: none;
}

    .oniric-mobile-nav__header {
        top: 32px !important;
    }
	
	    .oniric-mobile-nav__header.scrolled {
        top: 0px !important;
    }
	
		    .oniric-mobile-nav__brand.final {
        display: none !important;
    }

.oniric-mobile-nav__brand {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    pointer-events: auto;
}

.oniric-mobile-nav__logo {
    display: block;
    height: 2rem;
	    max-width: 76.3%;
}

.oniric-mobile-nav__panel {
    position: absolute;
    top: 2.2rem;
    right: var(--oniric-mobile-nav-side);
    width: var(--oniric-mobile-nav-panel-width);
    height: var(--oniric-mobile-nav-panel-height);
    pointer-events: none;
}

.oniric-mobile-nav__background {
    position: absolute;
    top: 11px;
    display: grid;
    place-items: center;
    right: 0;
    width: var(--oniric-mobile-nav-button-size);
    height: var(--oniric-mobile-nav-button-size);
    /* border: 1px solid rgba(255, 255, 255, .2); */
    border-radius: 50%;
    background: linear-gradient(134deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .07) 32%, rgba(245, 245, 245, .12) 40%), rgba(245, 245, 245, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 28px #ffffff33;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform-origin: top right;
    transition:
        width var(--oniric-mobile-nav-duration) var(--oniric-mobile-nav-easing),
        height var(--oniric-mobile-nav-duration) var(--oniric-mobile-nav-easing),
        border-radius var(--oniric-mobile-nav-duration) var(--oniric-mobile-nav-easing);
}

.oniric-mobile-nav__toggle {
    position: absolute;
    top: 11px;
    right: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    width: var(--oniric-mobile-nav-button-size);
    height: var(--oniric-mobile-nav-button-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transition: transform var(--oniric-mobile-nav-duration) var(--oniric-mobile-nav-easing);
}

.oniric-mobile-nav__toggle:focus-visible,
.oniric-mobile-nav a:focus-visible,
.oniric-mobile-nav__text-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.oniric-mobile-nav__icon {
    position: relative;
    display: block;
    width: 1.45rem;
    height: 1.2rem;
    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, .47));
}

.oniric-mobile-nav__bar {
    position: absolute;
    left: 50%;
    width: .75rem;
    height: 1px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
    transition:
        top var(--oniric-mobile-nav-duration) var(--oniric-mobile-nav-easing),
        transform var(--oniric-mobile-nav-duration) var(--oniric-mobile-nav-easing),
        opacity 220ms ease;
}

.oniric-mobile-nav__bar:nth-child(1) { top: .25rem; }
.oniric-mobile-nav__bar:nth-child(2) { top: .60rem; }
.oniric-mobile-nav__bar:nth-child(3) { top: .95rem; }

.oniric-mobile-nav__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 1.65rem 2.1rem 1.55rem 1.45rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.18);
    transform-origin: top right;
    transition:
        transform var(--oniric-mobile-nav-duration) var(--oniric-mobile-nav-easing),
        opacity 320ms ease,
        visibility 0s linear var(--oniric-mobile-nav-duration);
}

.oniric-mobile-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.55rem;
    margin: 0;
    padding: .2rem 0 0;
    list-style: none;
}

.oniric-mobile-nav__list a,
.oniric-mobile-nav__account a,
.oniric-mobile-nav__languages a {
    color: var(--oniric-mobile-nav-white);
    font-family: "Plus Jakarta Sans", sans-serif;
    text-decoration: none;
}

.oniric-mobile-nav__list a {
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: right;
}

.oniric-mobile-nav__list a.active,
.oniric-mobile-nav__list a[aria-current="page"] {
    opacity: .62;
}


.oniric-mobile-nav__languages {
    gap: .32rem;
    color: rgba(241, 241, 238, .45);
}

.oniric-mobile-nav__languages a {
    opacity: .42;
}

.oniric-mobile-nav__languages a.active {
    opacity: 1;
}

.oniric-mobile-nav__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    color: var(--oniric-mobile-nav-white);
    text-decoration: none;
}

.oniric-mobile-nav__cart .material-symbols-outlined {
    font-size: 1.2rem;
    font-variation-settings: "wght" 300;
}

.oniric-mobile-nav__cart-count {
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: rgba(241, 241, 238, .92);
    color: var(--oniric-mobile-nav-black);
    font-size: .72rem;
    font-weight: 500;
}

.oniric-mobile-nav__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .30);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 360ms ease,
        visibility 0s linear var(--oniric-mobile-nav-duration);
}

/* Estado abierto */
.oniric-mobile-nav[data-navigation-status="open"] {
    pointer-events: auto;
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__background {
    width: 100%;
    height: 100%;
    border-radius: 3rem;
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition-delay: 0ms, 110ms, 0ms;
	    padding-top: 54px;

}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__toggle {
    transform: translate(-.7rem, .7rem);
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__bar:nth-child(1) {
    top: .60rem;
    transform: translateX(-50%) rotate(45deg);
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__bar:nth-child(3) {
    top: .60rem;
    transform: translateX(-50%) rotate(-45deg);
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0ms;
}

.oniric-mobile-nav__list li,
.oniric-mobile-nav__footer {
    opacity: 0;
    transform: translateY(-.45rem);
    transition:
        opacity 300ms ease,
        transform 420ms var(--oniric-mobile-nav-easing);
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__list li,
.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__footer {
    opacity: 1;
    transform: translateY(0);
}

.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__list li:nth-child(1) { transition-delay: 150ms; }
.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__list li:nth-child(2) { transition-delay: 190ms; }
.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__list li:nth-child(3) { transition-delay: 230ms; }
.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__list li:nth-child(4) { transition-delay: 270ms; }
.oniric-mobile-nav[data-navigation-status="open"] .oniric-mobile-nav__footer { transition-delay: 310ms; }

html.has-oniric-mobile-nav-open,
body.has-oniric-mobile-nav-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.oniric-mobile-nav__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    width: 100%;

    margin-top: auto;

    padding-top: 1.1rem;

    border-top:
        1px solid
        rgba(241, 241, 238, .12);
}


/* ==========================================================================
   USER
   ========================================================================== */

.oniric-mobile-nav__user {
    width: 100%;

    padding:
        .2rem
        0
        1rem;
}


.oniric-mobile-nav__user-heading {
    display: flex;
    align-items: flex-start;

    gap: .65rem;

    width: 100%;
}


.oniric-mobile-nav__user-status {
    width: .42rem;
    height: .42rem;

    flex: 0 0 auto;

    margin-top: .38rem;

    border-radius: 50%;

    background: #fdda25;

    box-shadow:
        0 0 10px
        rgba(253, 218, 37, .4);
}


.oniric-mobile-nav__user-copy {
    display: flex;
    flex-direction: column;

    gap: .3rem;

    min-width: 0;
}


.oniric-mobile-nav__user-copy small {
    color:
        rgba(241, 241, 238, .48);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: .61rem;
    font-weight: 500;

    line-height: 1.35;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.oniric-mobile-nav__user-copy strong {
    overflow: hidden;

    color:
        var(--oniric-mobile-nav-white);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: .9rem;
    font-weight: 500;

    line-height: 1.35;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================================
   DASHBOARD CTA
   ========================================================================== */

.oniric-mobile-nav__user-dashboard {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: .9rem;

    padding:
        .7rem
        .85rem;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: .8rem;

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

    color:
        var(--oniric-mobile-nav-white);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: .82rem;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

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


.oniric-mobile-nav__user-dashboard:hover,
.oniric-mobile-nav__user-dashboard:focus-visible {
    border-color:
        rgba(255, 255, 255, .22);

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

    color:
        var(--oniric-mobile-nav-white);
}


.oniric-mobile-nav__user-arrow {
    color:
        rgba(241, 241, 238, .52);

    font-size: .95rem;
}


/* ==========================================================================
   GUEST ACCOUNT
   ========================================================================== */

.oniric-mobile-nav__guest-account {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding:
        .8rem
        0
        1rem;

    color:
        var(--oniric-mobile-nav-white);

    font-size: .88rem;

    text-decoration: none;
}


/* ==========================================================================
   SECONDARY
   ========================================================================== */

.oniric-mobile-nav__secondary {
    display: flex;
    justify-content: flex-end;

    width: 100%;

    padding:
        .85rem
        0;

    border-top:
        1px solid
        rgba(241, 241, 238, .08);
}


.oniric-mobile-nav__secondary a {
    color:
        rgba(241, 241, 238, .72);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: .78rem;

    text-decoration: none;
}


/* ==========================================================================
   META
   ========================================================================== */

.oniric-mobile-nav__meta {
    display: flex;

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

    gap: 1rem;

    width: 100%;

    padding:
        .8rem
        0;

    border-top:
        1px solid
        rgba(241, 241, 238, .08);
}


.oniric-mobile-nav__languages {
    display: flex;
    align-items: center;

    gap: .4rem;

    color:
        rgba(241, 241, 238, .28);
}


.oniric-mobile-nav__languages a {
    color:
        var(--oniric-mobile-nav-white);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: .76rem;

    text-decoration: none;

    opacity: .36;

    transition:
        opacity .2s ease;
}


.oniric-mobile-nav__languages a.active {
    opacity: 1;
}


/* ==========================================================================
   CART
   ========================================================================== */

.oniric-mobile-nav__cart {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: .38rem;

    color:
        var(--oniric-mobile-nav-white);

    text-decoration: none;
}


.oniric-mobile-nav__cart
.material-symbols-outlined {
    font-size: 1.15rem;

    font-variation-settings:
        "wght" 300;
}


.oniric-mobile-nav__cart-count {
    display: grid;
    place-items: center;

    min-width: 1.3rem;
    height: 1.3rem;

    padding:
        0
        .25rem;

    border-radius: 999px;

    background:
        rgba(241, 241, 238, .92);

    color:
        var(--oniric-mobile-nav-black);

    font-size: .68rem;
    font-weight: 500;
}


/* ==========================================================================
   LOGOUT
   ========================================================================== */

.oniric-mobile-nav__logout-form {
    display: block;

    width: 100%;

    margin: 0;

    padding-top: .55rem;

    border-top:
        1px solid
        rgba(241, 241, 238, .08);
}


.oniric-mobile-nav__text-button {
    border: 0;

    background: transparent;

    color:
        var(--oniric-mobile-nav-white);

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    cursor: pointer;
}


.oniric-mobile-nav__logout {
    width: 100%;

    padding:
        .45rem
        0
        0;

    color:
        rgba(241, 241, 238, .40);

    font-size: .7rem;
    font-weight: 400;

    text-align: right;

    transition:
        color .2s ease;
}


.oniric-mobile-nav__logout:hover {
    color:
        rgba(241, 241, 238, .82);
}


@media (max-width: 575.98px) {
    :root {
        --oniric-mobile-nav-side: 2rem;
        --oniric-mobile-nav-panel-width: min(16rem, calc(100vw - 2rem));
--oniric-mobile-nav-panel-height: min(34rem, calc(100dvh - 4rem));
    }

    .oniric-mobile-nav__header {
        padding-inline: var(--oniric-mobile-nav-side);
    }

    .oniric-mobile-nav__content {
        padding: 1.55rem 1.85rem 1.45rem 1.25rem;
    }

    .oniric-mobile-nav__list {
        gap: 1.35rem;
    }
	
	.oniric-footer-bottom {
    font-size: 0.70rem;
}
.oniric-pie {
    display: flex;
    flex-direction: column-reverse;
}

.oniric-footer-bottom {

	    margin-top: 0.25rem;

}

.oniric-footer-links-row {
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}
	
}

@media (min-width: 992px) {
    .oniric-mobile-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oniric-mobile-nav *,
    .oniric-mobile-nav *::before,
    .oniric-mobile-nav *::after {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}