.layout-wrapper .layout-topbar.eskin-topbar {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 8px 22px;
            background: rgba(255, 255, 255, .96);
            border-bottom: 1px solid #E5EAF3;
            box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
        }

        .eskin-topbar .layout-menu-button,
        .eskin-topbar #topbar-menu-button {
            flex: 0 0 auto;
            color: #1E293B !important;
            background: #F8FAFC;
            border: 1px solid #E5EAF3;
        }

        .eskin-topbar .layout-menu-button:hover,
        .eskin-topbar #topbar-menu-button:hover {
            background: #EFF6FF !important;
            color: #2196F3 !important;
        }

        .eskin-topbar-brand {
            display: flex !important;
            align-items: center;
            flex: 0 0 auto;
        }

        .eskin-topbar-wordmark {
            width: auto !important;
            height: 26px !important;
            display: block;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
            float: none;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li {
            float: none;
            margin-left: 0;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > a {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: auto !important;
            min-width: 42px;
            height: 42px !important;
            line-height: 1 !important;
            padding: 0 14px;
            border-radius: 999px !important;
            background: #F8FAFC;
            border: 1px solid #E5EAF3;
            color: #1E293B !important;
            font-size: 12px;
            font-weight: 800;
            text-decoration: none;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > a:hover {
            background: #EFF6FF !important;
            border-color: #BFDBFE;
            color: #2196F3 !important;
        }

        .eskin-topbar-profile > a {
            padding: 0 10px 0 6px !important;
        }

        .eskin-topbar-avatar {
            width: 34px !important;
            height: 34px !important;
            margin: 0 !important;
            border-radius: 50% !important;
            object-fit: cover;
            border: 2px solid #E5EAF3;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > a .topbar-item-name,
        .eskin-topbar-name {
            display: inline !important;
            color: inherit;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > ul {
            top: 52px;
            right: 0;
            border: 1px solid #E5EAF3;
            border-radius: 16px;
            box-shadow: 0 22px 50px rgba(15, 23, 42, .14);
            overflow: hidden;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > ul a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 13px 16px;
            color: #1E293B;
            font-size: 13px;
            font-weight: 700;
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > ul a:hover {
            background: #F8FAFC;
            color: #2196F3;
        }

        @media (max-width: 900px) {
            .eskin-topbar-name {
                display: none !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar {
                gap: 8px;
                padding: 8px 12px;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu {
                gap: 6px;
            }

        }

        @media (max-width: 1200px) {
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-inventory-alert-topbar > a .topbar-item-name,
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-news-topbar > a .topbar-item-name {
                display: none !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-inventory-alert-topbar > a,
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-news-topbar > a {
                min-width: 42px;
                padding: 0;
            }
        }

        .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu {
            flex-wrap: wrap;
            row-gap: 6px;
            justify-content: flex-end;
        }

        /*
         * Causa raiz del panel flotante superpuesto en mobile:
         * layout-blue.css (vendor) tiene su propio breakpoint @896px que saca
         * ".topbar-menu" del flujo normal (position:absolute, width:250px,
         * display:none/block por click) y apila sus <li> al 100% de ancho,
         * convirtiendolo en un panel tipo "dropdown" grande y centrado sobre
         * el contenido. Aqui se neutraliza ese comportamiento: el cluster de
         * alerta/novedades/usuario se queda SIEMPRE visible como fila
         * horizontal compacta, dentro del mismo flex row del topbar (igual
         * que la hamburguesa), en vez de un panel activado por el boton de
         * 3 puntos.
         */
        @media screen and (max-width: 896px) {
            .layout-wrapper .layout-topbar.eskin-topbar #topbar-menu-button {
                display: none !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu {
                position: static !important;
                display: flex !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                top: auto !important;
                right: auto !important;
                left: auto !important;
                width: auto !important;
                max-width: none !important;
                margin: 0 0 0 auto !important;
                padding: 0 !important;
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
                gap: 6px !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu:before,
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu:after {
                display: none !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li {
                width: auto !important;
                float: none !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > a {
                width: 38px !important;
                height: 38px !important;
                min-width: 38px !important;
                padding: 0 !important;
            }

            /* Mismo patron de selector (compuesto + !important) que ya usa el
               bloque de 1200px para ocultar "Alerta inventario"/"Novedades":
               se repite aqui para el nombre del usuario, de forma que los 3
               items del cluster queden solo con icono/avatar en mobile. */
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > a .topbar-item-name,
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > a .eskin-topbar-name {
                display: none !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .eskin-topbar-avatar {
                width: 28px !important;
                height: 28px !important;
            }

            /* Los submenus (Soporte / Mi cuenta) se siguen abriendo igual,
               pero anclados al viewport para no desbordar en pantallas angostas. */
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > ul {
                position: fixed !important;
                top: 56px !important;
                right: 8px !important;
                left: auto !important;
                width: min(240px, calc(100vw - 16px)) !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > ul:before,
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > ul:after {
                display: none !important;
            }
        }

        @media screen and (max-width: 480px) {
            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu {
                gap: 4px !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li > a {
                width: 34px !important;
                height: 34px !important;
                min-width: 34px !important;
            }

            .layout-wrapper .layout-topbar.eskin-topbar .eskin-topbar-avatar {
                width: 24px !important;
                height: 24px !important;
            }
        }

.eskin-menu-brand {
            display: flex !important;
            align-items: center;
            gap: 10px;
            width: 100%;
            height: 72px !important;
            padding: 12px 18px !important;
            background: #212121;
            border-bottom: 1px solid #373737;
            color: #F8FAFC;
            text-decoration: none;
            text-align: left !important;
        }

        .eskin-menu-brand:hover {
            background: #262626;
            text-decoration: none;
        }

        .layout-wrapper .layout-menu-container .layout-menu-logo .eskin-menu-brand img,
        .eskin-menu-brand img {
            width: 46px !important;
            height: 46px !important;
            flex: 0 0 auto;
            margin: 0 !important;
            border-radius: 13px;
        }

        .eskin-menu-brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.05;
            min-width: 0;
        }

        .eskin-menu-brand-name {
            color: #F8FAFC;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0;
            white-space: nowrap;
        }

        .eskin-menu-brand-caption {
            margin-top: 4px;
            color: #94A3B8;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .layout-wrapper .layout-menu-container .layout-menu-logo {
            background: #212121 !important;
            height: 72px;
            overflow: hidden;
        }

.eskin-session-expired-dialog {
    width: min(420px, calc(100vw - 32px)) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid #FDBA74 !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24) !important;
}

.eskin-session-expired-dialog .ui-dialog-content {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.eskin-session-expired-card {
    padding: 34px 30px 30px;
    text-align: center;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, #FFF7ED 0%, #FFEDD5 52%, #FED7AA 100%);
    color: #3B2414;
}

.eskin-session-expired-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 22px;
    background: #FFFFFF;
    color: #EA580C;
    border: 1px solid rgba(234, 88, 12, .22);
    box-shadow: 0 16px 34px rgba(234, 88, 12, .16);
    font-size: 30px;
}

.eskin-session-expired-card h2 {
    margin: 0 0 10px;
    color: #431407;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 0;
}

.eskin-session-expired-card p {
    max-width: 310px;
    margin: 0 auto 24px;
    color: #7C2D12;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.eskin-session-expired-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #EA580C;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(234, 88, 12, .22);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.eskin-session-expired-button:hover,
.eskin-session-expired-button:focus {
    background: #C2410C;
    box-shadow: 0 18px 36px rgba(234, 88, 12, .28);
    transform: translateY(-1px);
    outline: none;
}

.eskin-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .42);
}

.eskin-processing-overlay.visible {
    display: flex;
}

.eskin-processing-card {
    width: min(390px, calc(100vw - 32px));
    padding: 30px 28px;
    text-align: center;
    border: 1px solid #E5EAF3;
    border-radius: 24px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 30px 90px rgba(15, 23, 42, .30);
    color: #162033;
}

.eskin-processing-spinner {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 4px solid #E5EAF3;
    border-top-color: #2196F3;
    animation: vrz-loader-spin .9s linear infinite;
}

.eskin-processing-card h2 {
    margin: 0 0 8px;
    color: #142033;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0;
}

.eskin-processing-card p {
    margin: 0;
    color: #64748B;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.eskin-processing-warning {
    display: none;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #FDBA74;
    border-radius: 16px;
    background: #FFF7ED;
    color: #7C2D12;
}

.eskin-processing-warning.visible {
    display: block;
}

.eskin-processing-warning strong,
.eskin-processing-warning span {
    display: block;
}

.eskin-processing-warning strong {
    margin-bottom: 6px;
    color: #431407;
    font-size: 14px;
    font-weight: 900;
}

.eskin-processing-warning span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.eskin-processing-warning button {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    border: 0;
    border-radius: 999px;
    background: #EA580C;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.eskin-processing-warning button:hover,
.eskin-processing-warning button:focus {
    background: #C2410C;
    outline: none;
}

.eskin-cobro-blockui {
    min-width: 210px;
    padding: 22px 26px;
    text-align: center;
    border: 1px solid #E5EAF3;
    border-radius: 18px;
    background: #FFFFFF;
    color: #162033;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .28);
}

.eskin-cobro-blockui i {
    display: block;
    margin-bottom: 12px;
    color: #2196F3;
    font-size: 30px;
}

.eskin-cobro-blockui span {
    display: block;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
}

@media (max-width: 480px) {
    .eskin-session-expired-card {
        padding: 28px 22px 24px;
    }

    .eskin-session-expired-icon {
        width: 64px;
        height: 64px;
        font-size: 27px;
    }

    .eskin-session-expired-card h2 {
        font-size: 22px;
    }

    .eskin-session-expired-card p {
        font-size: 15px;
    }

    .eskin-session-expired-button {
        width: 100%;
    }

    .eskin-processing-card {
        padding: 26px 22px;
    }
}