:root {
    --ip-sb-ancho: 264px;
    --ip-sb-ancho-colapsado: 76px;
    --ip-sb-pad: 16px 16px 20px;
    --ip-sb-gap: 24px;
    --ip-sb-borde: 0.8px solid rgba(0, 0, 0, .05);
    --ip-sb-fondo: #ffffff;
    --ip-sb-item-alto: 38px;
    --ip-sb-item-pad: 8px 10px;
    --ip-sb-item-radio: 8px;
    --ip-sb-item-gap: 10px;
    --ip-sb-item-fs: var(--inec-menu-fs, 14px);
    --ip-sb-item-color: #000000;
    --ip-sb-sub-color: #636363;
    --ip-sb-hover: #f4f5f6;
    --ip-sb-activo-fondo: var(--inec-marca-suave, #fdece8);
    --ip-sb-activo-color: var(--inec-marca-fuerte, #d9482a);
    --ip-sb-tarjeta-borde: #e4e4e4;
    --ip-sb-barra: var(--inec-marca, #f16645);
    --ip-sb-sombra: rgba(0, 0, 0, .15) 0 2px 6px 0;
    --ip-primario: var(--inec-marca, #f16645);
    --ip-titulo: #3a4a5e;
    --ip-texto: #444444;
    --ip-fondo: #f9f9f9;
    --ip-lateral-viejo: #3d4b5f;
    --ip-borde-control: #e4e4e4;
    --ip-blanco: #ffffff;
    --ip-velo: rgba(15, 23, 42, .45);
    --ip-tooltip-fondo: #1f2328;
    --ip-tooltip-color: #ffffff;
    --ip-foco: color-mix(in srgb, var(--inec-marca, #f16645) 24%, transparent);
    --ip-sombra-popover: rgba(0, 0, 0, .18) 0 10px 30px;
    --ip-sombra-tema: rgba(0, 0, 0, .12) 0 1px 3px;
    --ip-peligro: #dc2626;
}

html.inecpanel-oscuro, html.inec-oscuro {
    --ip-sb-fondo: #1f2630;
    --ip-sb-item-color: #e8eaed;
    --ip-sb-sub-color: #a9b0b8;
    --ip-sb-hover: #2a3340;
    --ip-sb-tarjeta-borde: #334050;
    --ip-sb-borde: 0.8px solid rgba(255, 255, 255, .06);
    --ip-fondo: #161b22;
    --ip-titulo: #e8eaed;
    --ip-texto: #c9ced4;
    --ip-borde-control: rgba(255, 255, 255, .1);
    --ip-tooltip-fondo: #f3f4f6;
    --ip-tooltip-color: #111827;
    --ip-sombra-popover: rgba(0, 0, 0, .45) 0 12px 32px;
    --ip-sombra-tema: rgba(0, 0, 0, .35) 0 1px 3px;
}

.inecpanel-con-contador,
html[data-inecpanel-escritorio] .inecpanel-con-contador,
html[data-inecpanel-movil] .inecpanel-con-contador {
    position: relative;
}

.inecpanel-contador,
html[data-inecpanel-escritorio] .inecpanel-contador,
html[data-inecpanel-movil] .inecpanel-contador {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    width: auto;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    margin: 0;
    box-sizing: border-box;
    letter-spacing: 0;
    transform: translate(35%, -35%);
    place-items: center;
    border-radius: 99px;
    background: var(--ip-primario);
    color: #fff;
    font: 700 9px/1 Inter, system-ui, sans-serif;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--ip-sb-fondo, #fff);
}

@media (min-width: 769px) {
    html[data-inecpanel-escritorio] #vibebp_member .profile_menu,
    html[data-inecpanel-escritorio] #vibebp_member .profile_grid_header,
    html[data-inecpanel-escritorio] #vibebp_member .vibebp_left_sidebar_wrapper {
        display: none !important;
    }

    html[data-inecpanel-escritorio] #vibebp_member .profile_grid {
        margin-left: var(--ip-sb-ancho);
        min-width: 0;
        transition: margin-left .2s ease;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado #vibebp_member .profile_grid {
        margin-left: var(--ip-sb-ancho-colapsado);
    }

    html[data-inecpanel-escritorio] .inecpanel-sb {
        position: fixed;
        top: var(--inec-adminbar, 0px);
        bottom: 0;
        left: 0;
        right: auto;
        z-index: 30;
        display: flex;
        width: var(--ip-sb-ancho);
        height: auto;
        padding: var(--ip-sb-pad);
        flex-direction: column;
        gap: var(--ip-sb-gap);
        overflow-y: auto;
        box-sizing: border-box;
        border: 0;
        border-right: var(--ip-sb-borde);
        background: var(--ip-sb-fondo);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
        transition: width .2s ease;
        scrollbar-width: thin;
    }

    html.inecpanel-colapsado[data-inecpanel-escritorio] .inecpanel-sb {
        width: var(--ip-sb-ancho-colapsado);
        transition: none;
    }

    html[data-inecpanel-escritorio] .inecpanel-sb-cab {
        display: flex;
        min-height: 36px;
        padding: 0 2px 0 10px;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    html[data-inecpanel-escritorio] .inecpanel-marca {
        display: flex;
        min-width: 0;
        flex: 1;
        align-items: center;
    }

    html[data-inecpanel-escritorio] .inecpanel-logo {
        display: block;
        width: auto;
        height: 36px;
        object-fit: contain;
        object-position: left center;
    }

    html[data-inecpanel-escritorio] .inecpanel-logo-oscuro {
        display: none !important;
    }

    html[data-inecpanel-escritorio].inecpanel-oscuro .inecpanel-logo-claro {
        display: none !important;
    }

    html[data-inecpanel-escritorio].inecpanel-oscuro .inecpanel-logo-oscuro {
        display: block !important;
    }

    html[data-inecpanel-escritorio] .inecpanel-logo-txt,
    html[data-inecpanel-escritorio] .inecpanel-mlogo-txt {
        color: var(--ip-primario);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: .03em;
    }

    html[data-inecpanel-escritorio] .inecpanel-btn,
    html[data-inecpanel-escritorio] .inecpanel-item,
    html[data-inecpanel-escritorio] .inecpanel-subitem,
    html[data-inecpanel-escritorio] .inecpanel-usuario,
    html[data-inecpanel-escritorio] .inecpanel-buscar,
    html[data-inecpanel-escritorio] .inecpanel-perfil-btn,
    html[data-inecpanel-escritorio] .inecpanel-tab,
    html[data-inecpanel-escritorio] .inecpanel-perfil-item {
        padding: 0;
        box-sizing: border-box;
        font-family: inherit;
        text-transform: none;
    }

    html[data-inecpanel-escritorio] .inecpanel-btn {
        display: grid;
        width: 32px;
        height: 32px;
        flex: none;
        place-items: center;
        border: 0;
        border-radius: var(--ip-sb-item-radio);
        background: transparent;
        color: var(--ip-sb-item-color);
        cursor: pointer;
    }

    html[data-inecpanel-escritorio] .inecpanel-btn:hover,
    html[data-inecpanel-escritorio] .inecpanel-btn:focus-visible {
        background: var(--ip-sb-hover);
    }

    html[data-inecpanel-escritorio] .inecpanel-btn:focus-visible,
    html[data-inecpanel-escritorio] .inecpanel-item:focus-visible,
    html[data-inecpanel-escritorio] .inecpanel-subitem:focus-visible,
    html[data-inecpanel-escritorio] .inecpanel-usuario:focus-visible,
    html[data-inecpanel-escritorio] .inecpanel-buscar:focus-visible,
    html[data-inecpanel-escritorio] .inecpanel-perfil-btn:focus-visible {
        outline: 2px solid var(--ip-primario);
        outline-offset: 2px;
    }

    html[data-inecpanel-escritorio] .inecpanel-cerrar-cajon {
        display: none;
    }

    html[data-inecpanel-escritorio] .inecpanel-sb-lista,
    html[data-inecpanel-escritorio] .inecpanel-sb .inecpanel-sub {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
        list-style: none;
    }

    html[data-inecpanel-escritorio] .inecpanel-sb-lista {
        gap: 2px;
    }

    html[data-inecpanel-escritorio] .inecpanel-item {
        display: flex;
        width: 100%;
        height: var(--ip-sb-item-alto);
        padding: var(--ip-sb-item-pad);
        align-items: center;
        gap: var(--ip-sb-item-gap);
        border: 0;
        border-radius: var(--ip-sb-item-radio);
        background: transparent;
        color: var(--ip-sb-item-color);
        font-size: var(--ip-sb-item-fs);
        font-weight: 500;
        line-height: var(--inec-menu-lh, 1.3);
        text-align: left;
        cursor: pointer;
    }

    html[data-inecpanel-escritorio] .inecpanel-item:hover {
        background: var(--ip-sb-hover);
    }

    html[data-inecpanel-escritorio] .inecpanel-item.is-activo {
        background: var(--ip-sb-activo-fondo);
        color: var(--ip-sb-activo-color);
        font-weight: 600;
    }

    html[data-inecpanel-escritorio] .inecpanel-ico {
        display: block;
        width: 18px;
        height: 18px;
        flex: none;
        fill: none;
        stroke: currentColor;
    }

    html[data-inecpanel-escritorio] .inecpanel-txt {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: var(--inec-menu-lh, 1.3);
        padding-block: 1px;
    }

    html[data-inecpanel-escritorio] .inecpanel-chev {
        display: inline-flex;
        opacity: .7;
        transition: transform .15s ease;
    }

    html[data-inecpanel-escritorio] .inecpanel-chev .inecpanel-ico {
        width: 14px;
        height: 14px;
    }

    html[data-inecpanel-escritorio] .inecpanel-item[aria-expanded="true"] .inecpanel-chev {
        transform: rotate(90deg);
    }

    html[data-inecpanel-escritorio] .inecpanel-sb .inecpanel-sub {
        display: none;
        margin: 2px 0 4px;
        padding-left: 38px;
        gap: 1px;
    }

    html[data-inecpanel-escritorio] .inecpanel-item[aria-expanded="true"] + .inecpanel-sub {
        display: flex;
    }

    html[data-inecpanel-escritorio] .inecpanel-subitem {
        display: block;
        width: 100%;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--ip-sb-sub-color);
        font-size: 13px;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
    }

    /* Tableta: subitem de 28 px es blanco táctil chico; ~38 px con dedo. */
    @media (pointer: coarse) {
        html[data-inecpanel-escritorio] .inecpanel-subitem {
            padding-top: 11px;
            padding-bottom: 11px;
        }
    }

    html[data-inecpanel-escritorio] .inecpanel-subitem:hover {
        background: var(--ip-sb-hover);
        color: var(--ip-sb-item-color);
    }

    html[data-inecpanel-escritorio] .inecpanel-subitem.is-activo {
        color: var(--ip-sb-activo-color);
        font-weight: 600;
    }

    html[data-inecpanel-escritorio] .inecpanel-sb-empuje {
        flex: 1;
    }

    html[data-inecpanel-escritorio] .inecpanel-sb-pie {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    html[data-inecpanel-escritorio] .inecpanel-usuario {
        display: flex;
        width: 100%;
        min-height: 45px;
        padding: 12px 10px 0;
        align-items: center;
        gap: 10px;
        border: 0;
        border-top: 1px solid var(--ip-sb-tarjeta-borde);
        background: transparent;
        color: var(--ip-sb-item-color);
        text-align: left;
        cursor: pointer;
    }

    html[data-inecpanel-escritorio] .inecpanel-usuario:hover {
        border-radius: var(--ip-sb-item-radio);
        background: var(--ip-sb-hover);
    }

    html[data-inecpanel-escritorio] .inecpanel-avatar {
        display: grid;
        width: 32px;
        height: 32px;
        flex: none;
        place-items: center;
        overflow: hidden;
        border-radius: 50%;
        background: var(--ip-primario);
        color: var(--ip-blanco);
        font-size: 12px;
        font-weight: 600;
    }

    html[data-inecpanel-escritorio] .inecpanel-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    html[data-inecpanel-escritorio] .inecpanel-usuario-datos {
        min-width: 0;
    }

    html[data-inecpanel-escritorio] .inecpanel-usuario-nombre,
    html[data-inecpanel-escritorio] .inecpanel-usuario-rol {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-inecpanel-escritorio] .inecpanel-usuario-nombre {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
    }

    html[data-inecpanel-escritorio] .inecpanel-usuario-rol {
        margin-top: 2px;
        color: var(--ip-sb-sub-color);
        font-size: 12px;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-txt,
    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-chev,
    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-sb .inecpanel-sub,
    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-usuario-datos {
        display: none !important;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-sb-cab {
        padding: 0;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-marca {
        flex: none;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-logo {
        width: 40px;
        height: 36px;
        object-fit: cover;
        object-position: left center;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-logo-txt {
        font-size: 13px;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-item {
        justify-content: center;
        padding: 8px 0;
    }

    html[data-inecpanel-escritorio].inecpanel-colapsado .inecpanel-usuario {
        padding: 12px 0 0;
        justify-content: center;
    }

    html[data-inecpanel-escritorio] .inecpanel-tooltip {
        position: fixed;
        z-index: 9999;
        display: none;
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--ip-tooltip-fondo);
        box-shadow: var(--ip-sb-sombra);
        color: var(--ip-tooltip-color);
        font: 500 12px/1.2 Inter, system-ui, sans-serif;
        pointer-events: none;
        white-space: nowrap;
    }

    html[data-inecpanel-escritorio] .inecpanel-tooltip.is-visible {
        display: block;
    }

    html[data-inecpanel-escritorio] .inecpanel-tooltip::before {
        position: absolute;
        top: 50%;
        right: 100%;
        border-width: 5px 5px 5px 0;
        border-style: solid;
        border-color: transparent var(--ip-tooltip-fondo) transparent transparent;
        content: "";
        transform: translateY(-50%);
    }

    html[data-inecpanel-escritorio] .inecpanel-top {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        /* .profile_grid trae 24px de padding lateral: la barra lo come para ir de borde a borde. */
        width: calc(100% + 48px);
        margin: 0 -24px;
        height: 64px;
        padding: 0 32px;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        border-bottom: var(--ip-sb-borde);
        background: var(--ip-sb-fondo);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-escritorio] .inecpanel-top:has(.inecpanel-saludo) {
        height: 72px;
    }

    html[data-inecpanel-escritorio] .inecpanel-top-izq {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
    }

    html[data-inecpanel-escritorio] .inecpanel-saludo,
    html[data-inecpanel-escritorio] .inecpanel-top .inecpanel-sub {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-inecpanel-escritorio] .inecpanel-saludo {
        color: var(--ip-sb-item-color);
        font-size: 22px;
        font-weight: 600;
        line-height: 1.25;
    }

    html[data-inecpanel-escritorio] .inecpanel-top .inecpanel-sub {
        margin-top: 2px;
        color: var(--ip-sb-sub-color);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;
    }

    html[data-inecpanel-escritorio] .inecpanel-miga {
        overflow: hidden;
        color: var(--ip-sb-item-color);
        font-size: 15px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-inecpanel-escritorio] .inecpanel-miga span {
        color: var(--ip-sb-sub-color);
    }

    html[data-inecpanel-escritorio] .inecpanel-buscar {
        display: flex;
        width: 360px;
        max-width: 100%;
        height: 36px;
        padding: 0 8px 0 12px;
        flex: 0 1 360px;
        align-items: center;
        gap: 8px;
        border: 0.8px solid var(--ip-borde-control);
        border-radius: 10px;
        background: var(--ip-sb-fondo);
        color: var(--ip-sb-sub-color);
        cursor: pointer;
    }

    html[data-inecpanel-escritorio] .inecpanel-buscar-txt {
        flex: 1;
        color: var(--ip-sb-sub-color);
        font-size: 13px;
        text-align: left;
    }

    html[data-inecpanel-escritorio] .inecpanel-atajo {
        display: inline-flex;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        align-items: center;
        justify-content: center;
        border: 0.8px solid var(--ip-borde-control);
        border-radius: 4px;
        background: var(--ip-sb-hover);
        color: var(--ip-sb-sub-color);
        font: 500 11px Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-escritorio] .inecpanel-top-acciones {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 12px;
    }

    html[data-inecpanel-escritorio] .inecpanel-carrito,
    html[data-inecpanel-escritorio] .inecpanel-con-contador {
        position: relative;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-btn {
        display: block;
        border: 0;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil {
        position: absolute;
        top: calc(100% + 8px);
        right: 24px;
        z-index: 1000;
        width: 250px;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid var(--ip-borde-control);
        border-radius: 14px;
        background: var(--ip-sb-fondo);
        box-shadow: var(--ip-sombra-popover);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil[hidden] {
        display: none !important;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-cabeza {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 4px 8px;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-avatar {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-info {
        flex: 1;
        min-width: 0;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-nom {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ip-sb-item-color);
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-rol {
        font-size: 12px;
        color: var(--ip-sb-sub-color);
        margin-top: 2px;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-sep {
        height: 0;
        background: none;
        border: 0;
        border-top: 1px solid var(--ip-borde-control);
        margin: 8px 0;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-lista {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
        gap: 2px;
        list-style: none;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px 10px;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: var(--ip-sb-item-color);
        font: 500 13px Inter, sans-serif;
        text-decoration: none;
        cursor: pointer;
        box-sizing: border-box;
        text-align: left;
    }

    /* El CSS nativo centra los span de los botones. */
    html[data-inecpanel-escritorio] .inecpanel-perfil-item > span {
        flex: 1 1 auto;
        text-align: left;
    }

    html[data-inecpanel-escritorio] .inecpanel-tema-opcion > span {
        flex: none;
        width: auto;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-item:hover {
        background: var(--ip-sb-hover);
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-item .inecpanel-ico {
        width: 16px;
        height: 16px;
        color: var(--ip-sb-sub-color);
        flex: none;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-tema-wrap {
        padding: 4px 6px;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-tema-etq {
        margin-bottom: 6px;
        color: var(--ip-sb-sub-color);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-temas {
        display: flex;
        padding: 3px;
        gap: 2px;
        border-radius: 8px;
        background: var(--ip-sb-hover);
    }

    html[data-inecpanel-escritorio] .inecpanel-tema-opcion {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 30px;
        padding: 0;
        flex: 1;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--ip-sb-sub-color);
        font: 500 12px Inter, sans-serif;
        cursor: pointer;
        transition: all .15s;
    }

    html[data-inecpanel-escritorio] .inecpanel-tema-opcion:hover {
        color: var(--ip-sb-item-color);
    }

    html[data-inecpanel-escritorio] .inecpanel-tema-opcion.is-activo {
        background: var(--ip-sb-fondo);
        box-shadow: var(--ip-sombra-tema);
        color: var(--ip-sb-item-color);
        font-weight: 600;
    }

    html[data-inecpanel-escritorio] .inecpanel-tema-opcion .inecpanel-ico {
        width: 15px;
        height: 15px;
        flex: none;
    }

    html[data-inecpanel-escritorio] .inecpanel-perfil-salir,
    html[data-inecpanel-escritorio] .inecpanel-perfil-salir .inecpanel-ico {
        color: var(--ip-peligro);
    }

    html[data-inecpanel-escritorio] .inecpanel-mtop,
    html[data-inecpanel-escritorio] .inecpanel-mtabs,
    html[data-inecpanel-escritorio] .inecpanel-velo {
        display: none !important;
    }

    html[data-inecpanel-escritorio] .inecpanel-btn.is-girando .inecpanel-ico {
        animation: inecpanel-girar 1s linear infinite;
    }

    @keyframes inecpanel-girar {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    html[data-inecpanel-escritorio] .inecpanel-avisos {
        position: absolute;
        top: calc(100% + 8px);
        right: 24px;
        z-index: 1000;
        width: 320px;
        max-height: 400px;
        overflow-y: auto;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid var(--ip-borde-control);
        border-radius: 14px;
        background: var(--ip-sb-fondo);
        box-shadow: var(--ip-sombra-popover);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-escritorio] .inecpanel-avisos[hidden] {
        display: none !important;
    }

    html[data-inecpanel-escritorio] .inecpanel-avisos-cab {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 8px;
        padding: 0 4px;
    }

    html[data-inecpanel-escritorio] .inecpanel-avisos-lista {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    html[data-inecpanel-escritorio] .inecpanel-avisos-lista li {
        padding: 8px;
        border-radius: 8px;
        background: var(--ip-sb-hover);
        font-size: 13px;
        line-height: 1.4;
    }
    
    html[data-inecpanel-escritorio] .inecpanel-avisos-vacio,
    html[data-inecpanel-escritorio] .inecpanel-avisos-cargando {
        padding: 12px 4px;
        font-size: 13px;
        color: var(--ip-sb-sub-color);
        text-align: center;
    }
}

@media (max-width: 768px) {
    html[data-inecpanel-movil] #vibebp_member .profile_menu,
    html[data-inecpanel-movil] #vibebp_member .profile_grid_header,
    html[data-inecpanel-movil] #vibebp_member .vibebp_left_sidebar_wrapper {
        display: none !important;
    }

    html[data-inecpanel-movil] #vibebp_member .profile_grid {
        padding-top: 56px;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    html[data-inecpanel-movil] .inecpanel-top {
        display: none !important;
    }

    /* La admin bar de WP (absolute, z 99999, 46px) tapaba la barra superior y se
       comia los taps de admin/instructor (↻, carrito...). La barra ya trae Administrar. */
    html[data-inecpanel-movil]:has(.inecpanel-mtop) #wpadminbar {
        display: none !important;
    }
    html[data-inecpanel-movil]:has(.inecpanel-mtop),
    html[data-inecpanel-movil]:has(.inecpanel-mtop) body.admin-bar {
        --inec-adminbar: 0px;
        margin-top: 0 !important;
    }

    html[data-inecpanel-movil] .inecpanel-mtop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 25;
        display: flex;
        width: 100%;
        height: 56px;
        padding: 0 8px 0 4px;
        box-sizing: border-box;
        align-items: center;
        gap: 4px;
        border-bottom: var(--ip-sb-borde);
        background: var(--ip-sb-fondo);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-movil] .inecpanel-btn,
    html[data-inecpanel-movil] .inecpanel-item,
    html[data-inecpanel-movil] .inecpanel-subitem,
    html[data-inecpanel-movil] .inecpanel-usuario,
    html[data-inecpanel-movil] .inecpanel-perfil-btn,
    html[data-inecpanel-movil] .inecpanel-tab,
    html[data-inecpanel-movil] .inecpanel-perfil-item {
        padding: 0;
        box-sizing: border-box;
        font-family: inherit;
        text-transform: none;
    }

    html[data-inecpanel-movil] .inecpanel-btn {
        display: grid;
        width: 44px;
        height: 44px;
        flex: none;
        place-items: center;
        border: 0;
        border-radius: var(--ip-sb-item-radio);
        background: transparent;
        color: var(--ip-sb-item-color);
        cursor: pointer;
    }

    html[data-inecpanel-movil] .inecpanel-btn:focus-visible,
    html[data-inecpanel-movil] .inecpanel-item:focus-visible,
    html[data-inecpanel-movil] .inecpanel-subitem:focus-visible,
    html[data-inecpanel-movil] .inecpanel-usuario:focus-visible,
    html[data-inecpanel-movil] .inecpanel-perfil-btn:focus-visible,
    html[data-inecpanel-movil] .inecpanel-tab:focus-visible {
        outline: 2px solid var(--ip-primario);
        outline-offset: 2px;
    }

    html[data-inecpanel-movil] .inecpanel-mmarca {
        display: flex;
        min-width: 0;
        flex: 1;
        align-items: center;
    }

    html[data-inecpanel-movil] .inecpanel-mlogo,
    html[data-inecpanel-movil] .inecpanel-mmarca .inecpanel-logo {
        display: block;
        width: auto;
        height: 30px;
        object-fit: contain;
    }

    html[data-inecpanel-movil] .inecpanel-logo-oscuro {
        display: none !important;
    }

    html[data-inecpanel-movil].inecpanel-oscuro .inecpanel-logo-claro {
        display: none !important;
    }

    html[data-inecpanel-movil].inecpanel-oscuro .inecpanel-logo-oscuro {
        display: block !important;
    }

    html[data-inecpanel-movil] .inecpanel-mlogo-txt,
    html[data-inecpanel-movil] .inecpanel-logo-txt {
        color: var(--ip-primario);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: .03em;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-btn {
        display: block;
        border: 0;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
    }

    html[data-inecpanel-movil] .inecpanel-avatar {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        overflow: hidden;
        border-radius: 50%;
        background: var(--ip-primario);
        color: var(--ip-blanco);
        font-size: 11px;
        font-weight: 600;
    }

    html[data-inecpanel-movil] .inecpanel-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    html[data-inecpanel-movil] .inecpanel-sb {
        position: fixed;
        top: var(--inec-adminbar, 0px);
        bottom: 0;
        left: 0;
        right: auto;
        z-index: 40;
        display: flex;
        width: min(86vw, 320px);
        height: auto;
        padding: 10px 12px 14px;
        box-sizing: border-box;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        border: 0;
        border-right: var(--ip-sb-borde);
        background: var(--ip-sb-fondo);
        box-shadow: var(--ip-sb-sombra);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    html[data-inecpanel-movil].inecpanel-cajon-abierto .inecpanel-sb {
        transform: none;
    }

    html[data-inecpanel-movil] .inecpanel-sb-cab {
        display: flex;
        min-height: 44px;
        padding-left: 10px;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    html[data-inecpanel-movil] .inecpanel-marca {
        display: flex;
        min-width: 0;
        flex: 1;
        align-items: center;
    }

    html[data-inecpanel-movil] .inecpanel-sb .inecpanel-logo {
        display: block;
        width: auto;
        height: 36px;
        object-fit: contain;
    }

    html[data-inecpanel-movil].inecpanel-colapsado .inecpanel-sb .inecpanel-logo {
        width: auto;
        height: 36px;
        object-fit: revert;
        object-position: revert;
    }

    html[data-inecpanel-movil] .inecpanel-colapsar {
        display: none;
    }

    html[data-inecpanel-movil] .inecpanel-cerrar-cajon {
        display: grid;
    }

    html[data-inecpanel-movil] .inecpanel-sb-lista,
    html[data-inecpanel-movil] .inecpanel-sb .inecpanel-sub {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
        gap: 1px;
        list-style: none;
    }

    html[data-inecpanel-movil] .inecpanel-item {
        display: flex;
        width: 100%;
        height: 38px;
        padding: 6px 10px;
        align-items: center;
        gap: var(--ip-sb-item-gap);
        border: 0;
        border-radius: var(--ip-sb-item-radio);
        background: transparent;
        color: var(--ip-sb-item-color);
        font-size: var(--inec-menu-fs, 13px);
        font-weight: 500;
        line-height: var(--inec-menu-lh, 1.3);
        text-align: left;
        cursor: pointer;
    }

    html[data-inecpanel-movil] .inecpanel-item.is-activo {
        background: var(--ip-sb-activo-fondo);
        color: var(--ip-sb-activo-color);
        font-weight: 600;
    }

    html[data-inecpanel-movil] .inecpanel-ico {
        display: block;
        width: 18px;
        height: 18px;
        flex: none;
        fill: none;
        stroke: currentColor;
    }

    html[data-inecpanel-movil] .inecpanel-txt {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: var(--inec-menu-lh, 1.3);
        padding-block: 1px;
    }

    html[data-inecpanel-movil] .inecpanel-chev {
        display: inline-flex;
        transition: transform .15s ease;
    }

    html[data-inecpanel-movil] .inecpanel-chev .inecpanel-ico {
        width: 14px;
        height: 14px;
    }

    html[data-inecpanel-movil] .inecpanel-item[aria-expanded="true"] .inecpanel-chev {
        transform: rotate(90deg);
    }

    html[data-inecpanel-movil] .inecpanel-sb .inecpanel-sub {
        display: none;
        margin: 2px 0 4px;
        padding-left: 38px;
    }

    html[data-inecpanel-movil] .inecpanel-item[aria-expanded="true"] + .inecpanel-sub {
        display: flex;
    }

    html[data-inecpanel-movil] .inecpanel-subitem {
        display: block;
        width: 100%;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--ip-sb-sub-color);
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }

    html[data-inecpanel-movil] .inecpanel-subitem.is-activo {
        color: var(--ip-sb-activo-color);
        font-weight: 600;
    }

    html[data-inecpanel-movil] .inecpanel-sb-empuje {
        flex: 1;
    }

    html[data-inecpanel-movil] .inecpanel-sb-pie {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    html[data-inecpanel-movil] .inecpanel-usuario {
        display: flex;
        width: 100%;
        min-height: 40px;
        padding: 8px 10px 0;
        align-items: center;
        gap: 10px;
        border: 0;
        border-top: 1px solid var(--ip-sb-tarjeta-borde);
        background: transparent;
        color: var(--ip-sb-item-color);
        text-align: left;
        cursor: pointer;
    }

    html[data-inecpanel-movil] .inecpanel-usuario-datos {
        min-width: 0;
    }

    html[data-inecpanel-movil] .inecpanel-usuario-nombre,
    html[data-inecpanel-movil] .inecpanel-usuario-rol {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-inecpanel-movil] .inecpanel-usuario-nombre {
        font-size: 14px;
        font-weight: 500;
    }

    html[data-inecpanel-movil] .inecpanel-usuario-rol {
        color: var(--ip-sb-sub-color);
        font-size: 12px;
    }

    html[data-inecpanel-movil] .inecpanel-velo {
        position: fixed;
        top: var(--inec-adminbar, 0px);
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 35;
        display: none;
        background: var(--ip-velo);
    }

    html[data-inecpanel-movil].inecpanel-cajon-abierto .inecpanel-velo {
        display: block;
    }

    html[data-inecpanel-movil] .inecpanel-mtabs {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: flex;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        border-top: 1px solid var(--ip-sb-tarjeta-borde);
        background: var(--ip-sb-fondo);
        font-family: Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-movil] .inecpanel-tab {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: var(--ip-sb-sub-color);
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
    }

    html[data-inecpanel-movil] .inecpanel-ico-tab {
        display: inline-flex;
        padding: 2px 14px;
        align-items: center;
        justify-content: center;
        border-radius: 99px;
    }

    html[data-inecpanel-movil] .inecpanel-tab.is-activo {
        color: var(--ip-sb-activo-color);
        font-weight: 600;
    }

    html[data-inecpanel-movil] .inecpanel-tab.is-activo .inecpanel-ico-tab {
        background: var(--ip-sb-activo-fondo);
    }

    html[data-inecpanel-movil] .inecpanel-txt-tab {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-inecpanel-movil] .inecpanel-perfil {
        position: absolute;
        top: calc(100% + 8px);
        right: 12px;
        z-index: 1000;
        width: 250px;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid var(--ip-borde-control);
        border-radius: 14px;
        background: var(--ip-sb-fondo);
        box-shadow: var(--ip-sombra-popover);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-movil] .inecpanel-perfil[hidden] {
        display: none !important;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-cabeza {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 4px 8px;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-avatar {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-info {
        flex: 1;
        min-width: 0;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-nom {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ip-sb-item-color);
    }

    html[data-inecpanel-movil] .inecpanel-perfil-rol {
        font-size: 12px;
        color: var(--ip-sb-sub-color);
        margin-top: 2px;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-sep {
        height: 0;
        background: none;
        border: 0;
        border-top: 1px solid var(--ip-borde-control);
        margin: 8px 0;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-lista {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
        gap: 2px;
        list-style: none;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px 10px;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: var(--ip-sb-item-color);
        font: 500 13px Inter, sans-serif;
        text-decoration: none;
        cursor: pointer;
        box-sizing: border-box;
        text-align: left;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-item > span {
        flex: 1 1 auto;
        text-align: left;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-item:hover {
        background: var(--ip-sb-hover);
    }

    html[data-inecpanel-movil] .inecpanel-perfil-item .inecpanel-ico {
        width: 16px;
        height: 16px;
        color: var(--ip-sb-sub-color);
        flex: none;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-tema-wrap {
        padding: 4px 6px;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-tema-etq {
        margin-bottom: 6px;
        color: var(--ip-sb-sub-color);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-temas {
        display: flex;
        padding: 3px;
        gap: 2px;
        border-radius: 8px;
        background: var(--ip-sb-hover);
    }

    html[data-inecpanel-movil] .inecpanel-tema-opcion {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 30px;
        padding: 0;
        flex: 1;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--ip-sb-sub-color);
        font: 500 12px Inter, sans-serif;
        cursor: pointer;
        transition: all .15s;
    }

    html[data-inecpanel-movil] .inecpanel-tema-opcion:hover {
        color: var(--ip-sb-item-color);
    }

    html[data-inecpanel-movil] .inecpanel-tema-opcion.is-activo {
        background: var(--ip-sb-fondo);
        box-shadow: var(--ip-sombra-tema);
        color: var(--ip-sb-item-color);
        font-weight: 600;
    }

    html[data-inecpanel-movil] .inecpanel-tema-opcion .inecpanel-ico {
        width: 15px;
        height: 15px;
        flex: none;
    }

    html[data-inecpanel-movil] .inecpanel-perfil-salir,
    html[data-inecpanel-movil] .inecpanel-perfil-salir .inecpanel-ico {
        color: var(--ip-peligro);
    }

    html[data-inecpanel-movil] .inecpanel-macciones {
        display: flex;
        margin-left: auto;
        gap: 2px;
        align-items: center;
    }
    
    html[data-inecpanel-movil] .inecpanel-macciones .inecpanel-btn {
        width: 36px;
        height: 36px;
    }

    html[data-inecpanel-movil] .inecpanel-macciones .inecpanel-ico {
        width: 20px;
        height: 20px;
    }
    
    html[data-inecpanel-movil] .inecpanel-mmarca .inecpanel-logo {
        max-width: 104px;
    }

    html[data-inecpanel-movil] .inecpanel-btn.is-girando .inecpanel-ico {
        animation: inecpanel-girar 1s linear infinite;
    }

    html[data-inecpanel-movil] .inecpanel-avisos {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        z-index: 1000;
        max-height: 60vh;
        overflow-y: auto;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid var(--ip-borde-control);
        border-radius: 14px;
        background: var(--ip-sb-fondo);
        box-shadow: var(--ip-sombra-popover);
        color: var(--ip-sb-item-color);
        font-family: Inter, system-ui, sans-serif;
    }

    html[data-inecpanel-movil] .inecpanel-avisos[hidden] {
        display: none !important;
    }

    html[data-inecpanel-movil] .inecpanel-avisos-cab {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 8px;
        padding: 0 4px;
    }

    html[data-inecpanel-movil] .inecpanel-avisos-lista {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    html[data-inecpanel-movil] .inecpanel-avisos-lista li {
        padding: 8px;
        border-radius: 8px;
        background: var(--ip-sb-hover);
        font-size: 13px;
        line-height: 1.4;
    }
    
    html[data-inecpanel-movil] .inecpanel-avisos-vacio,
    html[data-inecpanel-movil] .inecpanel-avisos-cargando {
        padding: 12px 4px;
        font-size: 13px;
        color: var(--ip-sb-sub-color);
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-inecpanel-escritorio] .inecpanel-sb,
    html[data-inecpanel-escritorio] #vibebp_member .profile_grid,
    html[data-inecpanel-movil] .inecpanel-sb,
    html[data-inecpanel-escritorio] .inecpanel-chev,
    html[data-inecpanel-movil] .inecpanel-chev {
        transition: none;
    }
}

/* Global: dentro del @media de escritorio no existia en el telefono y ↻ no giraba. */
@keyframes inecpanel-girar-m { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
    html[data-inecpanel-movil] .inecpanel-btn.is-girando .inecpanel-ico {
        animation: inecpanel-girar-m 1s linear infinite;
        transform-origin: 50% 50%;
    }
}

/* Puntos de carga del ↻, arriba bajo la barra, en todas las pantallas del panel */
.inecpanel-puntos {
    display: none; position: fixed; left: 50%; transform: translateX(-50%);
    top: calc(var(--inec-adminbar, 0px) + 72px); z-index: 100000;
    gap: 8px; align-items: center; pointer-events: none;
    padding: 8px 14px; border-radius: 999px; background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
html.inec-oscuro .inecpanel-puntos { background: #1f2937; }
html.inecpanel-refrescando .inecpanel-puntos { display: flex; }
.inecpanel-puntos i {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--inec-marca, #f0654a);
    animation: inecpanel-punto 1s ease-in-out infinite;
}
.inecpanel-puntos i:nth-child(2) { animation-delay: .15s; }
.inecpanel-puntos i:nth-child(3) { animation-delay: .3s; }
.inecpanel-puntos i:nth-child(4) { animation-delay: .45s; }
@keyframes inecpanel-punto {
    0%, 100% { transform: scale(.45); opacity: .6; }
    50% { transform: scale(1); opacity: 1; }
}
@media (max-width: 768px) {
    html[data-inecpanel-movil] .inecpanel-puntos { top: 62px; }
}

/* Aviso tras ↻ (Actualizado / Todo al dia) */
.inecpanel-toast {
    position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
    z-index: 100000; padding: 8px 16px; border-radius: 999px;
    background: #1f2937; color: #fff; font-size: 14px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .2s, transform .2s;
}
.inecpanel-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 769px) { .inecpanel-toast { bottom: 24px; } }

/* Estilos para CTA y Seccion instructor */
html[data-inecpanel-escritorio] .inecpanel-cta, html[data-inecpanel-movil] .inecpanel-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    height: 38px; border-radius: var(--ip-sb-item-radio);
    background: var(--ip-primario); color: #fff; font-size: 14px; 
    font-weight: 600; text-decoration: none; border: none; cursor: pointer;
    width: 100%; box-sizing: border-box;
}
html[data-inecpanel-escritorio] .inecpanel-cta:hover, html[data-inecpanel-movil] .inecpanel-cta:hover { filter: brightness(.95); }
html[data-inecpanel-escritorio] .inecpanel-cta svg, html[data-inecpanel-movil] .inecpanel-cta svg { width: 16px; height: 16px; }
html.inecpanel-colapsado[data-inecpanel-escritorio] .inecpanel-cta { width: 44px; margin: 0 auto; padding: 0; }
html.inecpanel-colapsado[data-inecpanel-escritorio] .inecpanel-cta .inecpanel-txt { display: none; }

html[data-inecpanel-escritorio] .inecpanel-seccion, html[data-inecpanel-movil] .inecpanel-seccion {
    padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; 
    text-transform: uppercase; color: var(--ip-sb-sub-color);
    margin-top: 8px;
    margin-bottom: calc(10px - var(--ip-sb-gap));
}
html[data-inecpanel-movil] .inecpanel-seccion {
    margin-bottom: 2px;
}
html.inecpanel-colapsado[data-inecpanel-escritorio] .inecpanel-seccion { display: none; }

html[data-inecpanel-escritorio] .inecpanel-volver,
html[data-inecpanel-movil] .inecpanel-volver {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; background: transparent; cursor: pointer;
    color: inherit; border-radius: 8px;
    transition: background 0.2s;
}
html[data-inecpanel-escritorio] .inecpanel-volver:hover,
html[data-inecpanel-movil] .inecpanel-volver:hover {
    background: var(--ip-sb-hover);
}
html[data-inecpanel-escritorio] .inecpanel-volver .inecpanel-ico,
html[data-inecpanel-movil] .inecpanel-volver .inecpanel-ico {
    width: 20px; height: 20px;
}

html[data-inecpanel-escritorio] .inecpanel-beta, html[data-inecpanel-movil] .inecpanel-beta {
    font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 6px; 
    margin-left: 4px; border-radius: 99px; background: var(--ip-sb-hover); 
    color: var(--ip-sb-sub-color);
}

html[data-inecpanel-escritorio] .inecpanel-top-miga-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Modo Auto / Flotante (Escritorio) */
html[data-inecpanel-escritorio].inecpanel-auto #vibebp_member .profile_grid {
    margin-left: var(--ip-sb-ancho-colapsado);
}

html[data-inecpanel-escritorio].inecpanel-auto .inecpanel-sb {
    width: var(--ip-sb-ancho-colapsado);
    transition: width 0.18s ease;
}

html[data-inecpanel-escritorio].inecpanel-auto.inecpanel-flotando .inecpanel-sb {
    width: var(--ip-sb-ancho);
    z-index: 60;
}

/* Expandido por hover el contenido se recorre igual que fijado: no queda tapado. */
html[data-inecpanel-escritorio].inecpanel-auto.inecpanel-flotando #vibebp_member .profile_grid {
    margin-left: var(--ip-sb-ancho);
}

@media (prefers-reduced-motion: reduce) {
    html[data-inecpanel-escritorio].inecpanel-auto .inecpanel-sb {
        transition: none;
    }
}

html[data-inecpanel-escritorio] nav.inecpanel-sb {
    scrollbar-color: transparent transparent;
}
html[data-inecpanel-escritorio] nav.inecpanel-sb:hover {
    scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}
html[data-inecpanel-escritorio] nav.inecpanel-sb::-webkit-scrollbar {
    width: 8px;
}
html[data-inecpanel-escritorio] nav.inecpanel-sb::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}
html[data-inecpanel-escritorio] nav.inecpanel-sb:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
}

/* Botón fijar/auto FUERA del riel: colapsado se apilaba bajo el logo y empujaba
   todas las filas una posición al expandir. Fijo al borde exterior del panel, sobre
   la barra superior; sigue dentro del <nav> para no soltar el flotado al pasarle encima. */
@media (min-width: 769px) {
    html[data-inecpanel-escritorio] .inecpanel-sb .inecpanel-colapsar {
        position: fixed;
        top: calc(var(--inec-adminbar, 0px) + 16px);
        left: calc(var(--ip-sb-ancho) + 12px);
        z-index: 61;
        transition: left .18s ease;
    }
    html[data-inecpanel-escritorio].inecpanel-auto .inecpanel-sb .inecpanel-colapsar {
        left: calc(var(--ip-sb-ancho-colapsado) + 12px);
    }
    html[data-inecpanel-escritorio].inecpanel-auto.inecpanel-flotando .inecpanel-sb .inecpanel-colapsar {
        left: calc(var(--ip-sb-ancho) + 12px);
    }
    /* Fijado = alfiler puesto: queda marcado. */
    html[data-inecpanel-escritorio]:not(.inecpanel-auto) .inecpanel-sb .inecpanel-colapsar {
        background: var(--ip-sb-activo-fondo);
        color: var(--ip-sb-activo-color);
    }
    html[data-inecpanel-escritorio] .inecpanel-top {
        padding-left: 60px;
    }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    html[data-inecpanel-escritorio] .inecpanel-sb .inecpanel-colapsar {
        transition: none;
    }
}