@media (max-width: 430.99px) {
    #labelcamp-iframe-container.loaded.has-scroll .labelcamp-header-overlay {
        left: 60px !important;
    }

    .labelcamp-header-overlay::before {
        /*display: none !important;*/
        left: -60px !important;
        width: 60px !important;
        height: 5px !important;
        background: var(--puntilla-bg-main) !important;
    }
}

@media (min-width: 431px) and (max-width: 744px) {
    #labelcamp-iframe-container.loaded.has-scroll .labelcamp-header-overlay {
        left: 100px !important;
    }

    .labelcamp-header-overlay::before {
        /*display: none !important;*/
        left: -100px !important;
        height: 5px !important;
        background: var(--puntilla-bg-main) !important;
    }
}
/**
 * LabelCamp Iframe Style Overrides
 * 
 * Alternativa CORS-friendly: En lugar de inyectar CSS dentro del iframe,
 * usamos overlays y manipulación externa del iframe para ocultar elementos.
 * 
 * Estrategia: Crear una máscara/overlay que cubra partes específicas del iframe
 */

/* =============================================================================
   CONTENEDOR DEL IFRAME Y OVERLAYS
   ============================================================================= */

/* Contenedor del iframe posicionado relativamente */
#labelcamp-iframe-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* El iframe mantiene su posición normal - NO se desplaza */
#labelcamp-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    position: absolute !important;
    top: 0 !important; /* Posición normal, sin desplazamiento */
    left: 0 !important;
    z-index: 1 !important; /* Debajo del overlay */
}

/* Overlay para ocultar el header - Inicialmente transparente y a todo lo ancho */
.labelcamp-header-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important; /* Inicialmente a todo lo ancho */
    height: 3.75rem !important;
    /* Gradiente: primeros 20px semitransparentes, resto color actual */
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.1) 0px,
        rgba(255,255,255,0.1) 20px,
        var(--puntilla-bg-main, #fff) 21px,
        var(--puntilla-bg-main, #fff) 100%
    ) !important;
    z-index: 100 !important;
    pointer-events: unset !important;
    border-bottom: 1px solid transparent !important; /* Borde inicialmente transparente */

    /* Transición más rápida y fluida */
    transition: 
        right 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s ease-out,
        border-bottom-color 0.15s ease-out,
        opacity 0.1s ease !important;
}

/* Permitir interacción en los primeros 20px del overlay */
.labelcamp-header-overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100px; height: 100%;
    pointer-events: none;
    background: transparent;
    z-index: 101;
}

/* Cuando hay scroll visible, ceder espacio Y mostrar color */
#labelcamp-iframe-container.has-scroll .labelcamp-header-overlay {
    right: 20px !important; /* Ceder espacio al scroll */
    background: var(--puntilla-bg-main) !important; /* Mostrar color de fondo */
}

/* Área específica para scrollbar - mayor z-index */
.labelcamp-header-overlay::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 20px !important; /* Ancho típico de scrollbar */
    height: 100% !important;
    background: transparent !important;
    z-index: -1 !important; /* Detrás del contenido del iframe */
    pointer-events: auto !important; /* Permitir interacción con scroll */
}

/* Estilos para que el scrollbar sea visible */
#labelcamp-iframe-container::-webkit-scrollbar,
#labelcamp-iframe::-webkit-scrollbar {
    z-index: 200 !important; /* Scroll por encima de todo */
    position: relative !important;
}

/* Área transparente para que el scroll sea visible */
.labelcamp-scroll-area {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 20px !important;
    height: 3.75rem !important; /* Solo en el área del header */
    z-index: 200 !important; /* Por encima del overlay */
    pointer-events: none !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Alternativa: Clip-path para recortar el overlay y dejar visible el scroll */
.labelcamp-header-overlay.with-scroll-cutout {
    clip-path: inset(0 20px 0 0) !important; /* Recorta 20px del lado derecho */
}

/* Alternativa: Máscara que excluye el área del scroll */
.labelcamp-header-overlay.with-mask {
    mask: linear-gradient(90deg, 
        white 0%, 
        white calc(100% - 25px), 
        transparent calc(100% - 25px), 
        transparent 100%) !important;
    -webkit-mask: linear-gradient(90deg, 
        white 0%, 
        white calc(100% - 25px), 
        transparent calc(100% - 25px), 
        transparent 100%) !important;
}

/* =============================================================================
   ESTADOS Y INTERACCIONES
   ============================================================================= */

/* Estado inicial - overlay transparente a todo lo ancho */
#labelcamp-iframe-container.loading .labelcamp-header-overlay {
    right: 0 !important;
    opacity: 0.6 !important;
    background: rgba(255, 255, 255, 0.1) !important; /* Muy sutil durante carga */
}

/* Cuando el iframe está completamente cargado pero sin scroll */
#labelcamp-iframe-container.loaded .labelcamp-header-overlay {
    opacity: 1 !important;
}

/* Estado sin scroll - overlay transparente y completo */
#labelcamp-iframe-container.no-scroll .labelcamp-header-overlay {
    right: 0 !important;
    background: transparent !important; /* Mantener transparente */
    border-bottom-color: transparent !important;
}

/* Cuando se detecta scroll - overlay con color y espacio reducido */
#labelcamp-iframe-container.has-scroll .labelcamp-header-overlay {
    right: 20px !important;
    background: var(--puntilla-bg-main, #ffffff) !important;
}

/* Combinación: Cargado + Sin scroll = Transparente completo */
#labelcamp-iframe-container.loaded.no-scroll .labelcamp-header-overlay {
    right: 0 !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
}

/* Combinación: Cargado + Con scroll = Color + Espacio reducido */
#labelcamp-iframe-container.loaded.has-scroll .labelcamp-header-overlay {
    right: 20px !important;
    background: var(--puntilla-bg-main, #ffffff) !important;
}

/* Asegurar que el contenido del iframe sea interactivo */
#labelcamp-iframe-container {
    pointer-events: auto !important;
}

#labelcamp-iframe {
    pointer-events: auto !important;
}

/* Ocultar notificaciones si aparecen */
#labelcamp-iframe .application-wrapper .ember-cli-notifications-notification__container {
    display: none !important;
}