/* Ajustes específicos para el panel de color - Versión ultra específica */

/* Regla general para todos los dispositivos */
html body div.xioleni-editor-container div#xioleni-color-panel {
    position: fixed !important;
    z-index: 9999 !important;
}

html body div.xioleni-editor-container div#xioleni-color-panel button#xioleni-apply-color {
    position: static !important;
    margin-left: auto !important;
    margin-right: 6px !important;
    right: 0px !important;
    top: auto !important;
    left: auto !important;
    font-size: 11px !important;
    z-index: 1 !important;
}

/* Forzar el cursor alpha a ser visible */
html body div.xioleni-editor-container div#xioleni-color-panel div#xioleni-alpha-container div#xioleni-alpha-cursor {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

html body div.xioleni-editor-container div#xioleni-color-panel div#xioleni-alpha-container div#xioleni-alpha-cursor > div {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: white !important;
    border: 1.5px solid white !important;
    box-shadow: 0 0 2px rgba(0,0,0,0.8) !important;
}

/* Ocultar completamente el thumb original */
html body div.xioleni-editor-container div#xioleni-color-panel div#xioleni-alpha-container input#xioleni-alpha-input::-webkit-slider-thumb {
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

html body div.xioleni-editor-container div#xioleni-color-panel div#xioleni-alpha-container input#xioleni-alpha-input::-moz-range-thumb {
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* Media queries súper específicas para teléfonos */
@media only screen and (max-width: 480px) {
    html body div.xioleni-editor-container div#xioleni-color-panel {
        width: 320px !important;
        max-width: 95vw !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    html body div.xioleni-editor-container div#xioleni-color-panel button#xioleni-apply-color {
        font-size: 10px !important;
    }
}

/* Correcciones para degradados y colores en textos con efectos */
[style*="background-clip: text"],
[style*="-webkit-background-clip: text"],
[data-has-gradient="true"],
[data-xioleni-has-gradient="true"],
[data-xioleni-gradient-fixed="true"] {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    display: inline-block !important;
}

/* Asegurar que los textos con degradado preserven sus estilos en publicación */
.xioleni-post-content [style*="background-clip: text"],
.xioleni-post-content [style*="-webkit-background-clip: text"],
.xioleni-post-content [data-has-gradient="true"],
.xioleni-post-content [data-xioleni-has-gradient="true"],
.xioleni-post-content [data-xioleni-gradient-fixed="true"] {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    display: inline-block !important;
}

/* Preservar colores en elementos con efecto */
[class*="xioleni-text-"]:not([style*="background-clip"]):not([style*="-webkit-background-clip"]):not([data-has-gradient="true"]):not([data-xioleni-has-gradient="true"]) {
    color: var(--xioleni-text-color, inherit) !important;
}

/* Reglas para la publicación */
.xioleni-post-content [class*="xioleni-text-"] {
    max-width: 100% !important;
    display: inline-block !important;
}

/* Forzar propiedades para degradados - solo para elementos sin degradado */
@media screen {
    [style*="background-clip: text"]:not([data-has-gradient]):not([data-xioleni-has-gradient]):not([data-gradient-css]) *,
    [style*="-webkit-background-clip: text"]:not([data-has-gradient]):not([data-xioleni-has-gradient]):not([data-gradient-css]) * {
        color: inherit !important;
    }
    
    /* Mantener transparencia en degradados */
    [style*="background-clip: text"][data-has-gradient="true"],
    [style*="background-clip: text"][data-xioleni-has-gradient="true"],
    [style*="background-clip: text"][data-gradient-css],
    [style*="-webkit-background-clip: text"][data-has-gradient="true"],
    [style*="-webkit-background-clip: text"][data-xioleni-has-gradient="true"],
    [style*="-webkit-background-clip: text"][data-gradient-css] {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* SOLUCIÓN AGRESIVA PARA DEGRADADOS Y COLORES */
/* Forzar color transparente en todos los elementos con degradado */
[style*="background-clip: text"] *,
[style*="-webkit-background-clip: text"] *,
[data-has-gradient="true"] *,
[data-xioleni-has-gradient="true"] *,
[data-gradient-css] *,
[data-xioleni-gradient] *,
[data-xioleni-gradient-fixed="true"] * {
    color: inherit !important;
}

[style*="background-clip: text"],
[style*="-webkit-background-clip: text"],
[data-has-gradient="true"],
[data-xioleni-has-gradient="true"],
[data-gradient-css],
[data-xioleni-gradient],
[data-xioleni-gradient-fixed="true"] {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    display: inline-block !important;
}

/* Forzar preservación en publicación */
.xioleni-post-content [style*="background-clip: text"],
.xioleni-post-content [style*="-webkit-background-clip: text"],
.xioleni-post-content [data-has-gradient="true"],
.xioleni-post-content [data-xioleni-has-gradient="true"],
.xioleni-post-content [data-gradient-css],
.xioleni-post-content [data-xioleni-gradient],
.xioleni-post-content [data-xioleni-gradient-fixed="true"] {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-image: var(--xioleni-gradient, inherit) !important;
    background: var(--xioleni-gradient, inherit) !important;
}

/* Forzar colores normales en elementos con efectos sin degradado */
[class*="xioleni-text-"]:not([style*="background-clip"]):not([style*="-webkit-background-clip"]):not([data-has-gradient="true"]):not([data-xioleni-has-gradient="true"]) {
    color: var(--xioleni-color, inherit) !important;
}

/* Reglas para publicación */
.xioleni-post-content [class*="xioleni-text-"] {
    max-width: 100% !important;
    display: inline-block !important;
    color: var(--xioleni-color, inherit) !important;
}

/* Reglas específicas para elementos con degradado y efectos */
.xioleni-text-entrada-typewriter[style*="background-clip"],
.xioleni-text-bucle-typewriter-loop[style*="background-clip"],
.xioleni-text-entrada-rain[style*="background-clip"],
.xioleni-text-entrada-slide-left[style*="background-clip"],
.xioleni-text-entrada-slide-right[style*="background-clip"],
.xioleni-text-entrada-slide-up[style*="background-clip"],
.xioleni-text-entrada-slide-down[style*="background-clip"],
.xioleni-text-bucle-pulse[style*="background-clip"],
.xioleni-text-bucle-swing[style*="background-clip"],
.xioleni-text-bucle-wave[style*="background-clip"],
.xioleni-text-bucle-spin[style*="background-clip"],
.xioleni-text-interaccion-zoom[style*="background-clip"],
.xioleni-text-interaccion-shake[style*="background-clip"],
.xioleni-text-interaccion-pulse[style*="background-clip"],
.xioleni-text-interaccion-rotate[style*="background-clip"],
.xioleni-text-interaccion-expand[style*="background-clip"],
.xioleni-text-entrada-typewriter[style*="-webkit-background-clip"],
.xioleni-text-bucle-typewriter-loop[style*="-webkit-background-clip"],
.xioleni-text-entrada-rain[style*="-webkit-background-clip"],
.xioleni-text-entrada-slide-left[style*="-webkit-background-clip"],
.xioleni-text-entrada-slide-right[style*="-webkit-background-clip"],
.xioleni-text-entrada-slide-up[style*="-webkit-background-clip"],
.xioleni-text-entrada-slide-down[style*="-webkit-background-clip"],
.xioleni-text-bucle-pulse[style*="-webkit-background-clip"],
.xioleni-text-bucle-swing[style*="-webkit-background-clip"],
.xioleni-text-bucle-wave[style*="-webkit-background-clip"],
.xioleni-text-bucle-spin[style*="-webkit-background-clip"],
.xioleni-text-interaccion-zoom[style*="-webkit-background-clip"],
.xioleni-text-interaccion-shake[style*="-webkit-background-clip"],
.xioleni-text-interaccion-pulse[style*="-webkit-background-clip"],
.xioleni-text-interaccion-rotate[style*="-webkit-background-clip"],
.xioleni-text-interaccion-expand[style*="-webkit-background-clip"] {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-image: var(--xioleni-gradient, inherit) !important;
    background: var(--xioleni-gradient, inherit) !important;
}