/* =========================================================
   InitMU Persistent Banner v1.0.2 HOTFIX
   Objetivo:
   - Desktop ancho: banner en el gutter izquierdo, pegado a la línea del sidebar.
   - Desktop/Tablet/Móvil sin espacio lateral: banner como caja fija del sidebar, NO flotante.
   - No debe tapar sidebar, contenido central, WhatsApp ni publicaciones/noticias.
   - Oculto durante el preloader/loading modal.
   Imagen esperada: templates/momentum/img/persisbanner.png
   ========================================================= */

:root {
    --initmu-container-width: 1300px;
    --initmu-banner-gap: 14px;
    --initmu-banner-max: 440px;
    --initmu-banner-min: 220px;
}

.initmu-persist-banner {
    display: block;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(80, 184, 255, 0.78) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(2, 10, 24, 0.86) !important;
    box-shadow:
        0 0 18px rgba(0, 144, 255, 0.34),
        0 10px 34px rgba(0, 0, 0, 0.42),
        inset 0 0 24px rgba(42, 169, 255, 0.12) !important;
    opacity: 0.98 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
    transition: opacity .28s ease, transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
    isolation: isolate;
}

.initmu-persist-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border: 0 !important;
}

.initmu-persist-banner::before,
.initmu-persist-banner::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* Destello sutil del borde para invitar la vista sin romper el layout. */
.initmu-persist-banner::before {
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 0%,
        transparent 33%,
        rgba(174, 235, 255, 0.18) 45%,
        rgba(255, 219, 122, 0.12) 52%,
        transparent 66%,
        transparent 100%);
    transform: translateX(-125%);
    animation: initmuPersistBannerShine 5.6s ease-in-out infinite;
    mix-blend-mode: screen;
}

.initmu-persist-banner::after {
    inset: 0;
    border-radius: inherit;
    box-shadow:
        0 0 0 1px rgba(109, 206, 255, 0.14) inset,
        0 0 18px rgba(0, 176, 255, 0.20) inset;
    animation: initmuPersistBannerPulse 3.4s ease-in-out infinite;
}

.initmu-persist-banner:hover {
    opacity: 1 !important;
    transform: translateZ(0) scale(1.015) !important;
    border-color: rgba(155, 232, 255, 0.96) !important;
    box-shadow:
        0 0 30px rgba(0, 184, 255, 0.52),
        0 12px 42px rgba(0, 0, 0, 0.50),
        inset 0 0 28px rgba(42, 169, 255, 0.16) !important;
}

@keyframes initmuPersistBannerShine {
    0%, 56% { transform: translateX(-125%); opacity: 0; }
    66% { opacity: .85; }
    86% { transform: translateX(125%); opacity: .75; }
    100% { transform: translateX(125%); opacity: 0; }
}

@keyframes initmuPersistBannerPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(109, 206, 255, 0.14) inset,
            0 0 16px rgba(0, 176, 255, 0.18) inset,
            0 0 12px rgba(0, 176, 255, 0.22);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(172, 230, 255, 0.32) inset,
            0 0 24px rgba(0, 210, 255, 0.28) inset,
            0 0 24px rgba(0, 176, 255, 0.36);
    }
}

/* Versión desktop: se pega al borde izquierdo del container/sidebar, sin tocar el DOM central. */
.initmu-persist-banner--desktop {
    position: fixed !important;
    width: min(var(--initmu-banner-max), calc((100vw - var(--initmu-container-width)) / 2 - var(--initmu-banner-gap) * 2)) !important;
    min-width: 300px !important;
    max-width: var(--initmu-banner-max) !important;
    left: max(18px, calc((100vw - var(--initmu-container-width)) / 2 - var(--initmu-banner-max) - var(--initmu-banner-gap))) !important;
    bottom: 24px !important;
    z-index: 8400 !important;
}

/* Versión inline: vive dentro del sidebar. Por defecto queda oculta en desktop ancho para evitar duplicado. */
.initmu-persist-banner--inline {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 0 !important;
    z-index: 1 !important;
}

.initmu-persist-banner-fullslot {
    clear: both;
    width: 100%;
    margin: 18px auto 0 auto;
    text-align: center;
}

.initmu-persist-banner-fullslot .initmu-persist-banner--inline {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Si no hay gutter suficiente, se apaga la versión flotante y se usa la caja del sidebar. */
@media (max-width: 1780px) {
    .initmu-persist-banner--desktop {
        display: none !important;
    }
}

@media (min-width: 1781px) {
    .initmu-persist-banner--inline {
        display: none !important;
    }
}

/* Móvil/tablet: caja visible, legible, no flotante y sin pisar WhatsApp ni menú. */
@media (max-width: 767px) {
    .initmu-persist-banner--desktop {
        display: none !important;
    }

    .initmu-persist-banner--inline {
        display: block !important;
        width: calc(100% - 20px) !important;
        max-width: 460px !important;
        margin: 14px auto 16px auto !important;
        border-radius: 8px !important;
    }

    .initmu-persist-banner:hover {
        transform: translateZ(0) !important;
    }
}

/* No mostrar durante el modal/preloader de carga. */
html.initmu-preloading .initmu-persist-banner,
body.initmu-preloader-active .initmu-persist-banner,
#initmu-preloader:not(.initmu-preloader-hide) ~ .initmu-persist-banner,
.initmu-preloader:not(.initmu-preloader-hide) ~ .initmu-persist-banner {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Reduce animación si el usuario/navegador lo solicita. */
@media (prefers-reduced-motion: reduce) {
    .initmu-persist-banner,
    .initmu-persist-banner::before,
    .initmu-persist-banner::after {
        animation: none !important;
        transition: none !important;
    }
}