/* Garantizar que las imágenes dentro de columnas tienen espaciado */
    .xioleni-column-left img,
    .xioleni-column-right img {
        margin-bottom: 0 !important;
    }

    /* Forzar aplicación de espaciado en todos los contextos */
    .xioleni-post img,
    .xioleni-post-content img,
    .xioleni-editor-publicado img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Reglas de espaciado para muro publicado */
    .xioleni-post-content .xioleni-media-container {
        margin: 0 auto 15px auto !important;
    }

    .xioleni-post-content .xioleni-media-container:last-child {
        margin-bottom: 0 !important;
    }

    /* Variables globales para espaciado consistente */
    :root {
        --xioleni-image-gap: 15px;
    }

    /* Garantizar espaciado para imágenes individuales en la vista publicada */
    .xioleni-post-content .xioleni-media-container {
        margin-bottom: 15px !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }

    /* Forzar espaciado entre imágenes consecutivas */
    .xioleni-post-content .xioleni-media-container + .xioleni-media-container {
        margin-top: 15px !important;
    }

    /* Forzar espaciado para imágenes dentro del editor publicado */
    .xioleni-editor-publicado .xioleni-media-container {
        margin-bottom: 15px !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }

    /* Estilos generales para todos los contenedores de imágenes en todas las vistas */
.xioleni-media-container {
    margin-bottom: 15px !important;
    display: block !important;
    width: 100% !important; 
    clear: both !important;
    position: relative !important;
}

#xioleni-editor .xioleni-media-container {
    margin-bottom: 6px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#xioleni-editor .xioleni-media-container > img,
#xioleni-editor .xioleni-media-container > video {
    margin: 0 !important;
}

#xioleni-editor .xioleni-column-left .xioleni-media-container,
#xioleni-editor .xioleni-column-right .xioleni-media-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#xioleni-editor .xioleni-media-container:last-child {
    margin-bottom: 0 !important;
}

    /* Asegurar que los saltos de línea sean respetados antes y después de las imágenes */
    .xioleni-post-content br + .xioleni-media-container,
    .xioleni-editor-publicado br + .xioleni-media-container {
        margin-top: 15px !important;
    }

    .xioleni-post-content .xioleni-media-container + br,
    .xioleni-editor-publicado .xioleni-media-container + br {
        display: block !important;
        content: "" !important;
        margin-top: 15px !important;
    }

    /* NUEVA REGLA: Corrección para imágenes sueltas en el muro publicado */
    .xioleni-post-content > img {
        display: block !important;
        margin: 0 auto 15px auto !important;
        max-width: 100% !important;
        height: auto !important;
        clear: both !important;
    }

    /* NUEVA REGLA: Garantizar el espaciado entre imágenes consecutivas (tanto dentro como fuera de contenedores) */
    .xioleni-post-content > img + img,
    .xioleni-post-content > .xioleni-media-container + img,
    .xioleni-post-content > img + .xioleni-media-container {
        margin-top: 15px !important;
    }

    /* Forzar espaciado y BORDES REDONDEADOS para imágenes dentro de divs y spans genéricos */
    .xioleni-post-content div > img:only-child,
    .xioleni-post-content span > img:only-child,
    .xioleni-post-content img,
    .xioleni-editor-publicado img {
        display: block !important;
        margin: 0 auto 15px auto !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 10px !important; /* Curva de 10px obligatoria */
        object-fit: cover !important;
        aspect-ratio: 1/1 !important;
    }

    /* Mejoras para la visualización de transparencia */
    #xioleni-editor span[style*="color: hsla"],
    #xioleni-editor span[style*="color:hsla"],
    #xioleni-editor span[data-alpha] {
        color-rendering: optimizeQuality !important;
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        mix-blend-mode: normal !important; /* Prevenir cambios de color no deseados */
        isolation: isolate !important; /* Aislar el elemento para evitar interacciones de color */
        /* Forzar respeto del color asignado */
        --override-color: attr(style color); 
        --preserve-value: attr(style);
        --preserve-alpha: attr(data-alpha);
    }

    /* Mejora para contenedor alpha */
    #xioleni-alpha-container {
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-image: linear-gradient(to bottom, var(--color, hsla(180, 95%, 75%, 1)), transparent) !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 4px !important;
    }

    /* Complemento para visualizar gradiente de forma más precisa */
    #xioleni-alpha-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
        pointer-events: none;
        border-radius: 4px;
        z-index: 1; /* Asegurar que esté sobre el fondo pero debajo del cursor */
    }

    /* Optimizar renderizado de caracteres transparentes */
    .xioleni-post-content [style*="color: hsla"],
    .xioleni-post-content [style*="color:hsla"],
    #xioleni-editor [style*="color: hsla"],
    #xioleni-editor [style*="color:hsla"] {
        color-rendering: optimizeQuality !important;
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        isolation: isolate !important;
        mix-blend-mode: normal !important;
        filter: none !important; /* Prevenir filtros que puedan alterar el color */
    }

    /* Forzar que el color HSLA se aplique exactamente como se especifica */
    #xioleni-editor [style*="color: hsla"] *,
    #xioleni-editor [style*="color:hsla"] * {
        color: inherit !important;
        opacity: inherit !important;
    }

    /* Preservar colores HSLA en espacios anidados */
    #xioleni-editor span > span[style*="color: hsla"],
    #xioleni-editor span > span[style*="color:hsla"] {
        color: inherit !important;
    }

    /* Mejorar visualización de colores HSLA específicamente en el editor */
    #xioleni-editor {
        color-scheme: light dark !important; /* Mejorar compatibilidad de colores */
        color-gamut: srgb !important; /* Usar espacio de color estándar */
    }

    /* Reglas adicionales para corregir visualización de colores HSLA */
    #xioleni-editor span[style*="color: hsla"],
    #xioleni-editor span[style*="color:hsla"] {
        -webkit-text-fill-color: currentColor !important; /* Garantizar que el color del texto es respetado */
        background-clip: text !important; /* Controlar exactamente el área de aplicación del color */
        color-adjust: exact !important; /* Forzar colores exactos */
    }

    /* Corrección específica para el editor */
    #xioleni-editor {
        --color-text-rendering: optimizeSpeed;
        --color-adjust: exact;
        --webkit-font-smoothing: antialiased;
    }

    /* Asegurar que el texto con transparencia mantiene su color real */
    [data-hue][data-saturation][data-lightness][data-alpha] {
        color: attr(data-color) !important;
        opacity: attr(data-alpha number) !important;
    }

    /* Mejorar degradado en selector de alpha */
    #xioleni-alpha-container {
        /* Garantizar consistencia de color */
        --fallback-color: currentColor;
        --true-color: var(--color, hsla(180, 95%, 75%, 1));
        background-color: var(--true-color) !important;
    }

    /* Reparar el problema de inversión de canales HSL */
    #xioleni-editor *[style*="hsla"] {
        /* Forzar renderizado correcto */
        will-change: color !important;
        transition: none !important;
        animation: none !important;
    }

    .xioleni-color-label {
        font-weight: bold;
        font-size: 8px;
        color: #fff;
        position: absolute;
        top: 12px;
        left: 2px;
        z-index: 3;
        text-transform: capitalize;
        letter-spacing: 0.5px;
    }

    #xioleni-color-preview {
        width: 24px;
        height: 24px;
        border: 1px solid #666;
        border-radius: 25px !important;
        position: absolute;
        top: 17px;
        left: 2px;
        background-color: hsla(180, 95%, 75%, 1);
        box-shadow: 0 0 3px rgba(255,255,255,0.3);
        z-index: 2;
    }

    #xioleni-apply-color {
        background-color: #009cb61c;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 4px 10px;
        font-size: 11px;
        cursor: pointer;
        position: absolute;
        right: 45px;
        top: 15px;
        min-width: 0px;
        height: 25px;
        z-index: 3;
    }

    /* Ajustes para PC */
    #xioleni-color-panel {
        width: 280px !important;
    }

    #xioleni-apply-color {
        right: 50px !important;
    }

    /* Ajustes para tablet */
    @media (max-width: 768px) {
        .xioleni-color-header {
            width: 100%;
            padding-left: 40px;
        }
        
        .xioleni-color-label {
            font-size: 7px !important;
        }
        
        #xioleni-color-panel {
            width: 310px !important;
        }
        
        #xioleni-apply-color {
            right: 50px !important;
        }
    }

    /* Ajustes para teléfono */
    @media (max-width: 480px) {
        .xioleni-color-header {
            width: 100%;
            padding-left: 45px;
        }
        
        #xioleni-color-panel {
            width: 350px !important;
        }
        
        #xioleni-apply-color {
            right: 50px !important;
            font-size: 10px !important;
        }
    }

    .xioleni-color-label {
        top: 12px !important;
        left: 2px !important;
    }

    #xioleni-color-preview {
        top: 17px !important;
        left: 2px !important;
    }

    @media (max-width: 480px) {
        #xioleni-color-panel {
            width: 320px !important;
        }
    }

    /* Efecto Arcoíris - Versión mejorada que funciona siempre, no solo con hover */
    .xioleni-text-interaccion-rainbow {
        position: relative;
        display: inline-block !important;
        background-image: linear-gradient(to right, 
            red, orange, yellow, green, blue, indigo, violet) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
        animation: xioleni-rainbow-animation 2s linear infinite !important;
    }

    @keyframes xioleni-rainbow-animation {
        0% { background-position: 0% 50%; }
        100% { background-position: 100% 50%; }
    }

    /* Estilos para máquina de escribir con preservación de color */
    .xioleni-text-entrada-typewriter, 
    .xioleni-text-bucle-typewriter-loop {
        display: inline-block !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        vertical-align: bottom !important;
        color: inherit !important; /* Heredar el color del padre */
    }

    .xioleni-text-entrada-typewriter {
        animation: xioleniTypewriter 3s steps(40) forwards !important;
        border-right: 2px solid currentColor !important; /* Usar color actual */
    }

    .xioleni-text-bucle-typewriter-loop {
        animation: xioleniTypewriterLoop 6s steps(40) infinite !important;
        border-right: 2px solid currentColor !important; /* Usar color actual */
    }

    /* Asegurar que los efectos de bucle mantengan su color */
    .xioleni-text-bucle-pulse,
    .xioleni-text-bucle-swing,
    .xioleni-text-bucle-spin {
        color: inherit !important;
    }

    .xioleni-text-bucle-wave span {
        color: inherit !important;
    }

    /* Agregar preservación explícita de color en el muro para estos efectos */
    .xioleni-post-content .xioleni-text-entrada-typewriter,
    .xioleni-post-content .xioleni-text-bucle-typewriter-loop,
    .xioleni-post-content .xioleni-text-bucle-pulse,
    .xioleni-post-content .xioleni-text-bucle-swing,
    .xioleni-post-content .xioleni-text-bucle-spin,
    .xioleni-post-content .xioleni-text-bucle-wave,
    .xioleni-post-content .xioleni-text-entrada-rain {
        color: inherit !important;
    }

    .xioleni-post-content .xioleni-text-bucle-wave span,
    .xioleni-post-content .xioleni-text-entrada-rain span {
        color: inherit !important;
    }

    /* Efecto Arcoíris - NUEVA VERSIÓN QUE SOBRESCRIBE LAS ANTERIORES */
    body .xioleni-text-interaccion-rainbow,
    #xioleni-editor .xioleni-text-interaccion-rainbow,
    .xioleni-post-content .xioleni-text-interaccion-rainbow {
        position: relative !important;
        display: inline-block !important;
        background-image: linear-gradient(to right, 
            red, orange, yellow, green, blue, indigo, violet) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
        animation: xioleni-rainbow-animation 2s linear infinite !important;
    }

    /* Asegurar que el arcoíris funcione tanto en hover como sin hover */
    body .xioleni-text-interaccion-rainbow:hover,
    #xioleni-editor .xioleni-text-interaccion-rainbow:hover,
    .xioleni-post-content .xioleni-text-interaccion-rainbow:hover {
        background-image: linear-gradient(to right, 
            red, orange, yellow, green, blue, indigo, violet) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
        animation: xioleni-rainbow-animation 2s linear infinite !important;
    }

    /* Sobrescribir estilos adicionales para caracteres individuales */
    body .xioleni-text-interaccion-rainbow .xioleni-char-effect,
    #xioleni-editor .xioleni-text-interaccion-rainbow .xioleni-char-effect,
    .xioleni-post-content .xioleni-text-interaccion-rainbow .xioleni-char-effect {
        display: inline-block !important;
        color: transparent !important;
    }

    /* Preservación de color para efectos de bucle y entrada específicos */
    .xioleni-post-content .xioleni-text-bucle-wave .xioleni-char-effect,
    .xioleni-post-content .xioleni-text-entrada-rain .xioleni-char-effect {
        color: inherit !important;
    }

    /* Estilos específicos para el efecto ola (wave) */
    .xioleni-text-bucle-wave .xioleni-char-effect {
        animation: xioleniWaveChar 1.5s infinite ease-in-out !important;
        color: inherit !important;
    }

    .xioleni-post-content .xioleni-text-bucle-wave .xioleni-char-effect {
        animation: xioleniWaveChar 1.5s infinite ease-in-out !important;
        color: inherit !important;
    }

    /* Efectos de bucle específicos */
    .xioleni-text-bucle-pulse, 
    .xioleni-post-content .xioleni-text-bucle-pulse {
        animation: xioleniPulse 1.5s ease-in-out infinite !important;
        color: inherit !important;
    }

    .xioleni-text-bucle-spin, 
    .xioleni-post-content .xioleni-text-bucle-spin {
        animation: xioleniSpin 4s linear infinite !important;
        color: inherit !important;
    }

    .xioleni-text-bucle-swing, 
    .xioleni-post-content .xioleni-text-bucle-swing {
        animation: xioleniSwing 3s ease-in-out infinite !important;
        transform-origin: top center !important;
        color: inherit !important;
    }

    /* Estilos de alta especificidad para preservación de colores */

    /* Entrada lluvia de letras - asegurar que mantiene color */
    html body #xioleni-editor .xioleni-text-entrada-rain,
    html body .xioleni-post-content .xioleni-text-entrada-rain,
    body .xioleni-text-entrada-rain {
        display: inline-block !important;
        color: inherit !important; 
    }

    html body #xioleni-editor .xioleni-text-entrada-rain span,
    html body .xioleni-post-content .xioleni-text-entrada-rain span,
    html body #xioleni-editor .xioleni-text-entrada-rain .xioleni-char-effect,
    html body .xioleni-post-content .xioleni-text-entrada-rain .xioleni-char-effect,
    body .xioleni-text-entrada-rain span,
    body .xioleni-text-entrada-rain .xioleni-char-effect {
        display: inline-block !important;
        animation: xioleniRainChar 1s forwards;
        animation-fill-mode: both;
        color: inherit !important;
    }

    /* Asegurar que la máquina de escribir mantiene su color */
    html body #xioleni-editor .xioleni-text-entrada-typewriter,
    html body #xioleni-editor .xioleni-text-bucle-typewriter-loop,
    html body .xioleni-post-content .xioleni-text-entrada-typewriter,
    html body .xioleni-post-content .xioleni-text-bucle-typewriter-loop {
        color: inherit !important;
        border-right-color: currentColor !important;
    }

    /* Contenedores específicos de typewriter */
    html body #xioleni-editor .xioleni-type-container,
    html body .xioleni-post-content .xioleni-type-container {
        color: inherit !important;
    }

    html body #xioleni-editor .xioleni-type-effect,
    html body .xioleni-post-content .xioleni-type-effect {
        color: inherit !important;
    }

    /* Corrección para efecto LLUVIA DE LETRAS - Alta especificidad */
    html body #xioleni-editor .xioleni-text-entrada-rain,
    html body .xioleni-post-content .xioleni-text-entrada-rain,
    body .xioleni-text-entrada-rain {
        display: inline-block !important;
        color: inherit !important; 
    }

    html body #xioleni-editor .xioleni-text-entrada-rain span,
    html body .xioleni-post-content .xioleni-text-entrada-rain span,
    html body #xioleni-editor .xioleni-text-entrada-rain .xioleni-char-effect,
    html body .xioleni-post-content .xioleni-text-entrada-rain .xioleni-char-effect,
    body .xioleni-text-entrada-rain span,
    body .xioleni-text-entrada-rain .xioleni-char-effect {
        display: inline-block !important;
        animation: xioleniRainChar 1s forwards;
        animation-fill-mode: both;
        color: inherit !important;
    }

    /* Corrección efecto ARCOÍRIS - Reescrito completamente */
    .xioleni-text-interaccion-rainbow,
    .xioleni-text-interaccion-rainbow .xioleni-char-effect,
    .xioleni-text-interaccion-rainbow span,
    .xioleni-text-interaccion-rainbow:hover {
        background-image: linear-gradient(to right, 
            red, orange, yellow, green, blue, indigo, violet) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        background-repeat: repeat !important;
        color: transparent !important;
        animation: xioleni-rainbow-animation 3s linear infinite !important;
        display: inline-block !important;
        width: auto !important;
    }

    /* Corrección para arcoiris con alta especificidad */
    html body #xioleni-editor .xioleni-text-interaccion-rainbow,
    html body .xioleni-post-content .xioleni-text-interaccion-rainbow,
    html body #xioleni-editor .xioleni-text-interaccion-rainbow span,
    html body .xioleni-post-content .xioleni-text-interaccion-rainbow span {
        background-image: linear-gradient(to right, 
            red, orange, yellow, green, blue, indigo, violet) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
        animation: xioleni-rainbow-animation 3s linear infinite !important;
        display: inline-block !important;
    }

    @keyframes xioleni-rainbow-animation {
        0% { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
    }

    /* Corrección efecto OLA en BUCLE - problema de color */
    html body #xioleni-editor .xioleni-text-bucle-wave,
    html body .xioleni-post-content .xioleni-text-bucle-wave,
    body .xioleni-text-bucle-wave {
        display: inline-block !important;
        color: inherit !important;
    }

    html body #xioleni-editor .xioleni-text-bucle-wave span,
    html body .xioleni-post-content .xioleni-text-bucle-wave span,
    html body #xioleni-editor .xioleni-text-bucle-wave .xioleni-char-effect,
    html body .xioleni-post-content .xioleni-text-bucle-wave .xioleni-char-effect,
    body .xioleni-text-bucle-wave span,
    body .xioleni-text-bucle-wave .xioleni-char-effect {
        display: inline-block !important;
        animation: xioleniWaveChar 1.5s infinite ease-in-out !important;
        color: inherit !important;
    }

    /* Corrección efecto GIRAR EN SU PROPIO EJE en BUCLE */
    html body #xioleni-editor .xioleni-text-bucle-spin,
    html body .xioleni-post-content .xioleni-text-bucle-spin,
    body .xioleni-text-bucle-spin {
        display: inline-block !important;
        animation: xioleniSpin 4s linear infinite !important;
        color: inherit !important;
    }

    /* Asegurar función !important en animaciones relevantes */
    @keyframes xioleniRainChar {
        from { transform: translateY(-30px) !important; opacity: 0 !important; }
        to { transform: translateY(0) !important; opacity: 1 !important; }
    }

    @keyframes xioleniWaveChar {
        0%, 100% { transform: translateY(0) !important; }
        50% { transform: translateY(-7px) !important; }
    }

    @keyframes xioleniSpin {
        from { transform: rotate(0deg) !important; }
        to { transform: rotate(360deg) !important; }
    }

    /* EFECTO ARCOÍRIS - SOLUCIÓN DEFINITIVA CON MÁXIMA ESPECIFICIDAD */
    html body #xioleni-editor .xioleni-text-interaccion-rainbow,
    html body .xioleni-post-content .xioleni-text-interaccion-rainbow,
    html body #xioleni-editor .xioleni-text-interaccion-rainbow span,
    html body .xioleni-post-content .xioleni-text-interaccion-rainbow span,
    html body #xioleni-editor .xioleni-text-interaccion-rainbow .xioleni-char-effect,
    html body .xioleni-post-content .xioleni-text-interaccion-rainbow .xioleni-char-effect,
    #xioleni-editor .xioleni-text-interaccion-rainbow,
    .xioleni-post-content .xioleni-text-interaccion-rainbow,
    .xioleni-text-interaccion-rainbow {
        display: inline-block !important;
        background-image: linear-gradient(to right, 
            #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8B00FF) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
        animation: xioleni-rainbow-animation-fix 3s linear infinite !important;
        text-rendering: auto !important;
    }

    @keyframes xioleni-rainbow-animation-fix {
        0% { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
    }

    /* SOLUCIÓN DEFINITIVA PARA EFECTOS QUE NO MANTIENEN COLOR */

    /* Efecto LLUVIA DE LETRAS - Versión Definitiva */
    html body #xioleni-editor .xioleni-text-entrada-rain,
    html body .xioleni-post-content .xioleni-text-entrada-rain,
    body [class*="xioleni-text-entrada-rain"],
    *[class*="xioleni-text-entrada-rain"] {
        display: inline-block !important;
        color: inherit !important;
    }

    html body #xioleni-editor .xioleni-text-entrada-rain *,
    html body .xioleni-post-content .xioleni-text-entrada-rain *,
    body [class*="xioleni-text-entrada-rain"] *,
    *[class*="xioleni-text-entrada-rain"] * {
        color: inherit !important;
    }

    html body #xioleni-editor .xioleni-text-entrada-rain .xioleni-char-effect,
    html body .xioleni-post-content .xioleni-text-entrada-rain .xioleni-char-effect,
    body [class*="xioleni-text-entrada-rain"] .xioleni-char-effect,
    .xioleni-char-effect-container[data-effect="entrada-rain"] .xioleni-char-effect {
        display: inline-block !important;
        animation: xioleniRainChar 1s forwards !important;
        animation-fill-mode: both !important;
        color: inherit !important;
    }

    /* Efecto OLA - Versión Definitiva */
    html body #xioleni-editor .xioleni-text-bucle-wave,
    html body .xioleni-post-content .xioleni-text-bucle-wave,
    body [class*="xioleni-text-bucle-wave"],
    *[class*="xioleni-text-bucle-wave"] {
        display: inline-block !important;
        color: inherit !important;
    }

    html body #xioleni-editor .xioleni-text-bucle-wave *,
    html body .xioleni-post-content .xioleni-text-bucle-wave *,
    body [class*="xioleni-text-bucle-wave"] *,
    *[class*="xioleni-text-bucle-wave"] * {
        color: inherit !important;
    }

    html body #xioleni-editor .xioleni-text-bucle-wave .xioleni-char-effect,
    html body .xioleni-post-content .xioleni-text-bucle-wave .xioleni-char-effect,
    body [class*="xioleni-text-bucle-wave"] .xioleni-char-effect,
    .xioleni-char-effect-container[data-effect="bucle-wave"] .xioleni-char-effect {
        display: inline-block !important;
        animation: xioleniWaveChar 1.5s infinite ease-in-out !important;
        color: inherit !important;
    }

    /* Efecto GIRAR EN SU PROPIO EJE - Versión Definitiva */
    html body #xioleni-editor .xioleni-text-bucle-spin,
    html body .xioleni-post-content .xioleni-text-bucle-spin,
    body [class*="xioleni-text-bucle-spin"],
    *[class*="xioleni-text-bucle-spin"] {
        display: inline-block !important;
        animation: xioleniSpin 4s linear infinite !important;
        color: inherit !important;
    }

    html body #xioleni-editor .xioleni-text-bucle-spin *,
    html body .xioleni-post-content .xioleni-text-bucle-spin *,
    body [class*="xioleni-text-bucle-spin"] *,
    *[class*="xioleni-text-bucle-spin"] * {
        color: inherit !important;
        animation: none !important; /* Evitar conflicto de animaciones anidadas */
    }

    /* SOLUCIÓN ULTRA ESPECÍFICA PARA ELEMENTOS QUE NO CONSERVAN COLOR */

    /* Selector por atributos data - solución última instancia */
    [data-force-color="true"],
    [data-force-color="true"] *,
    [data-colored="true"],
    span[data-effect="entrada-rain"],
    span[data-effect="bucle-wave"],
    span[data-effect="bucle-spin"],
    span[data-effect="entrada-rain"] *,
    span[data-effect="bucle-wave"] *,
    span[data-effect="bucle-spin"] * {
        color: var(--force-color, inherit) !important;
    }

    /* Forzar color para elementos con --force-color definido */
    *[style*="--force-color"] {
        color: var(--force-color, inherit) !important;
    }

    /* Eliminar cualquier sobreescritura de color para animaciones */
    @media all {
        .xioleni-text-entrada-rain,
        .xioleni-text-entrada-rain *,
        .xioleni-text-bucle-wave,
        .xioleni-text-bucle-wave *,
        .xioleni-text-bucle-spin,
        .xioleni-text-bucle-spin * {
            color: var(--force-color, inherit) !important;
        }
        
        /* Asegurar que la animación no cambia el color */
        .xioleni-text-entrada-rain .xioleni-char-effect {
            animation: xioleniRainChar-fix 1s forwards !important;
        }
        
        .xioleni-text-bucle-wave .xioleni-char-effect {
            animation: xioleniWaveChar-fix 1.5s infinite ease-in-out !important;
        }
        
        .xioleni-text-bucle-spin {
            animation: xioleniSpin-fix 4s linear infinite !important;
        }
    }

    /* Versiones de animaciones que no afectan el color */
    @keyframes xioleniRainChar-fix {
        from { transform: translateY(-30px) !important; opacity: 0 !important; }
        to { transform: translateY(0) !important; opacity: 1 !important; }
    }

    @keyframes xioleniWaveChar-fix {
        0%, 100% { transform: translateY(0) !important; }
        50% { transform: translateY(-7px) !important; }
    }

    @keyframes xioleniSpin-fix {
        from { transform: rotate(0deg) !important; }
        to { transform: rotate(360deg) !important; }
    }

    /* SOLUCIÓN PARA EFECTOS QUE SE TAPAN EN EL MURO - ENFOQUE RADICAL */

    /* Forzar que los elementos con efectos siempre estén por encima */
    .xioleni-post-content [class*="xioleni-text-entrada-rain"],
    .xioleni-post-content [class*="xioleni-text-bucle-wave"],
    .xioleni-post-content [class*="xioleni-text-bucle-spin"],
    .xioleni-post [class*="xioleni-text-entrada-rain"],
    .xioleni-post [class*="xioleni-text-bucle-wave"],
    .xioleni-post [class*="xioleni-text-bucle-spin"] {
        z-index: 100 !important;
        position: relative !important;
        display: inline-block !important;
        color: inherit !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Asegurar que los caracteres individuales sean visibles */
    .xioleni-post-content [class*="xioleni-text-entrada-rain"] *,
    .xioleni-post-content [class*="xioleni-text-bucle-wave"] *,
    .xioleni-post-content [class*="xioleni-text-bucle-spin"] *,
    .xioleni-post [class*="xioleni-text-entrada-rain"] *,
    .xioleni-post [class*="xioleni-text-bucle-wave"] *,
    .xioleni-post [class*="xioleni-text-bucle-spin"] * {
        z-index: 101 !important;
        position: relative !important;
        display: inline-block !important;
        color: inherit !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Eliminar cualquier elemento que pueda estar tapando los efectos */
    .xioleni-post-content::before,
    .xioleni-post-content::after,
    .xioleni-post::before,
    .xioleni-post::after,
    .xioleni-editor-publicado::before,
    .xioleni-editor-publicado::after {
        content: none !important;
        display: none !important;
    }

    /* Desactivar cualquier transformación que pueda estar afectando la visualización */
    .xioleni-post-content,
    .xioleni-post,
    .xioleni-editor-publicado {
        transform: none !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        isolation: isolate !important;
    }

    /* Forzar la visualización de efectos específicos */
    .xioleni-post-content .xioleni-char-effect-container[data-effect="entrada-rain"],
    .xioleni-post-content .xioleni-char-effect-container[data-effect="bucle-wave"],
    .xioleni-post-content .xioleni-char-effect-container[data-effect="bucle-spin"] {
        display: inline-block !important;
        color: currentColor !important;
        mix-blend-mode: normal !important;
        isolation: isolate !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 100 !important;
        position: relative !important;
    }

    /* Asegurar que los efectos específicos conserven su color */
    .xioleni-post-content .xioleni-char-effect[data-colored="true"],
    .xioleni-post .xioleni-char-effect[data-colored="true"] {
        color: currentColor !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
    }

    /* Solución específica para lluvia de letras */
    .xioleni-char-effect-container[data-effect="entrada-rain"] .xioleni-char-effect {
        animation: xioleniRainChar-visible 1s forwards !important;
        color: currentColor !important;
    }

    /* Solución específica para ola */
    .xioleni-char-effect-container[data-effect="bucle-wave"] .xioleni-char-effect {
        animation: xioleniWaveChar-visible 1.5s infinite ease-in-out !important;
        color: currentColor !important;
    }

    /* Solución específica para girar */
    .xioleni-char-effect-container[data-effect="bucle-spin"] {
        animation: xioleniSpin-visible 4s linear infinite !important;
        color: currentColor !important;
    }

    /* Animaciones específicas que mantienen visibilidad */
    @keyframes xioleniRainChar-visible {
        0% { transform: translateY(-30px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    @keyframes xioleniWaveChar-visible {
        0%, 100% { transform: translateY(0); opacity: 1; }
        50% { transform: translateY(-7px); opacity: 1; }
    }

    @keyframes xioleniSpin-visible {
        from { transform: rotate(0deg); opacity: 1; }
        to { transform: rotate(360deg); opacity: 1; }
    }

    /* Reiniciar todos los estilos que puedan interferir con los colores en el muro */
    .xioleni-post-content *[style*="color"],
    .xioleni-post *[style*="color"] {
        color: currentColor !important;
    }

    /* Estilos para columnas de texto */
    .xioleni-text-columns {
        width: 100%;
        margin: 1em 0;
        padding: 0.5em 0;
        border-top: 1px solid #444;
        border-bottom: 1px solid #444;
        overflow: hidden; /* Prevenir desbordamiento */
        display: block;
    }

    .xioleni-text-columns[style*="column-count: 2"] {
        column-count: 2;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        text-align: justify;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .xioleni-text-columns[style*="column-count: 1"] {
        column-count: 1;
        -webkit-column-count: 1;
        -moz-column-count: 1;
        text-align: left;
    }

    /* Preservar estilos dentro de las columnas */
    .xioleni-text-columns * {
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    /* Estilo para cuando tenemos imágenes en columnas */
    .xioleni-images-single-column {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .xioleni-images-single-column .xioleni-image-row {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .xioleni-images-single-column img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .xioleni-image-row {
        display: flex;
        width: 100%;
        margin-bottom: 15px;
    }

    .xioleni-images-single-column .xioleni-media-container {
        width: 100%;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    @media (max-width: 768px) {
        .xioleni-text-columns[style*="column-count: 2"] {
            column-count: 1; /* En móviles siempre una columna */
            -webkit-column-count: 1;
            -moz-column-count: 1;
        }
    }

    /* Estilos para columnas de texto - mejora de compatibilidad */
    .xioleni-text-columns {
        width: 100%;
        margin: 1em 0;
        padding: 0.5em 0;
        border-top: 1px solid #444;
        border-bottom: 1px solid #444;
        overflow: hidden; /* Prevenir desbordamiento */
        display: block !important;
        clear: both;
    }

    .xioleni-text-columns[style*="column-count: 2"] {
        column-count: 2 !important;
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-gap: 20px !important;
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        text-align: justify;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .xioleni-text-columns[style*="column-count: 1"] {
        column-count: 1 !important;
        -webkit-column-count: 1 !important;
        -moz-column-count: 1 !important;
        text-align: left;
    }

    /* Preservar estilos dentro de las columnas */
    .xioleni-text-columns * {
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    /* Estilo para cuando tenemos imágenes en columnas */
    .xioleni-images-single-column {
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    .xioleni-images-single-column .xioleni-image-row {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        display: flex !important;
    }

    .xioleni-images-single-column img {
        max-width: 100%;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .xioleni-image-row {
        display: flex !important;
        width: 100%;
        margin-bottom: 15px;
    }

    .xioleni-images-single-column .xioleni-media-container {
        width: 100%;
        max-width: 100%;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Estilos para dos columnas de imágenes */
    .xioleni-images-double-column {
        width: 100%;
        display: flex !important;
        flex-direction: column;
        gap: 15px;
    }

    .xioleni-images-double-column .xioleni-image-row {
        display: flex !important;
        gap: 15px;
        width: 100%;
    }

    .xioleni-column-left, 
    .xioleni-column-right {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .xioleni-column-left img,
    .xioleni-column-right img {
        max-width: 100%;
        height: auto !important;
        display: block !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .xioleni-text-columns[style*="column-count: 2"] {
            column-count: 1 !important; /* En móviles siempre una columna */
            -webkit-column-count: 1 !important;
            -moz-column-count: 1 !important;
        }
        
        .xioleni-images-double-column .xioleni-image-row {
            flex-direction: column;
        }
        
        .xioleni-column-left, 
        .xioleni-column-right {
            width: 100% !important;
            margin-bottom: 15px;
        }
    }

    /* ESTILOS AGRESIVOS PARA COLUMNAS DE TEXTO */
    .xioleni-text-columns {
        width: 100% !important;
        margin: 1em 0 !important;
        padding: 0.5em 0 !important;
        border-top: 1px solid #444 !important;
        border-bottom: 1px solid #444 !important;
        overflow: hidden !important; /* Prevenir desbordamiento */
        display: block !important;
        position: relative !important;
        clear: both !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Columnas agresivas para texto */
    .xioleni-text-columns[data-column-count="2"],
    .xioleni-text-columns[style*="column-count: 2"] {
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-count: 2 !important;
        -webkit-column-gap: 20px !important;
        -moz-column-gap: 20px !important;
        column-gap: 20px !important;
        text-align: justify !important;
        -webkit-column-rule: none !important;
        -moz-column-rule: none !important;
        column-rule: none !important;
        -webkit-column-width: auto !important;
        -moz-column-width: auto !important;
        column-width: auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
    }

    .xioleni-text-columns[data-column-count="1"],
    .xioleni-text-columns[style*="column-count: 1"] {
        -webkit-column-count: 1 !important;
        -moz-column-count: 1 !important;
        column-count: 1 !important;
        text-align: left !important;
    }

    /* Preservar estilos dentro de las columnas */
    .xioleni-text-columns * {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
    }

    /* ESTILOS AGRESIVOS PARA IMÁGENES EN COLUMNAS */
    .xioleni-images-single-column {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 auto !important;
    }

    .xioleni-images-single-column .xioleni-image-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        display: flex !important;
    }

    .xioleni-images-single-column img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .xioleni-image-row {
        display: flex !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .xioleni-images-single-column .xioleni-media-container {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Estilos para dos columnas de imágenes */
    .xioleni-images-double-column {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .xioleni-images-double-column .xioleni-image-row {
        display: flex !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .xioleni-column-left, 
    .xioleni-column-right {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .xioleni-column-left img,
    .xioleni-column-right img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Forzar visibilidad para todas las imágenes en el editor */
    #xioleni-editor img:not(.xioleni-emoji-inline),
    .xioleni-media-container img {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        max-width: 100% !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .xioleni-text-columns[data-column-count="2"],
        .xioleni-text-columns[style*="column-count: 2"] {
            column-count: 1 !important; /* En móviles siempre una columna */
            -webkit-column-count: 1 !important;
            -moz-column-count: 1 !important;
        }
        
        .xioleni-images-double-column .xioleni-image-row {
            flex-direction: column !important;
        }
        
        .xioleni-column-left, 
        .xioleni-column-right {
            width: 100% !important;
            margin-bottom: 15px !important;
        }
    }

    /* Estilos específicos para los subpaneles del organizador */
    .xioleni-organizer-sub-panel {
        display: none;
        background-color: #444;
        padding: 10px;
        border-radius: 5px;
        margin-top: 5px;
    }

    /* Estilos específicos para los subpaneles del organizador */
    #xioleni-columns-panel,
    #xioleni-carousel-panel {
        display: none;
        background-color: #444;
        padding: 10px;
        border-radius: 5px;
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        width: 90%;
        max-width: 220px;
        left: 0;
        right: 0;
        z-index: 10000;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    }

    .xioleni-organizer-btn {
        background-color: #444;
        color: white;
        border: none;
        /* padding: 8px 15px; - Comentado para permitir estilos inline */
        border-radius: 8px;
        cursor: pointer;
        margin: 5px;
        width: calc(100% - 10px);
        text-align: left;
        font-size: 14px;
        transition: background-color 0.2s;
    }

    .xioleni-organizer-btn:hover {
        background-color: #555;
    }

    /* Estilos mejorados para columnas de texto */
    .xioleni-text-columns {
        display: block;
        width: 100%;
        margin: 1em 0;
        overflow: hidden;
        line-height: 1.5;
        text-align: left;
        position: relative;
        clear: both;
    }

    /* Una columna */
    .xioleni-text-columns[data-column-count="1"] {
        column-count: 1;
        -webkit-column-count: 1;
        -moz-column-count: 1;
    }

    /* Dos columnas */
    .xioleni-text-columns[data-column-count="2"] {
        column-count: 2;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-gap: 2em;
        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        column-fill: balance;
        -webkit-column-fill: balance;
        -moz-column-fill: balance;
        column-rule: 1px solid #e0e0e0;
        -webkit-column-rule: 1px solid #e0e0e0;
        -moz-column-rule: 1px solid #e0e0e0;
        padding: 0.5em 0;
        margin-bottom: 1.5em;
    }

    /* Evitar problemas con elementos internos */
    .xioleni-text-columns > * {
        margin-top: 0;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        text-indent: 0;
    }

    /* Corregir problema de títulos o elementos grandes */
    .xioleni-text-columns h1,
    .xioleni-text-columns h2,
    .xioleni-text-columns h3,
    .xioleni-text-columns h4,
    .xioleni-text-columns h5,
    .xioleni-text-columns h6 {
        margin-top: 0;
        page-break-after: avoid;
        break-after: avoid;
        -webkit-column-break-after: avoid;
    }

    /* Asegurar que el espacio en blanco se maneja correctamente */
    .xioleni-text-columns p:first-child {
        margin-top: 0;
    }

    .xioleni-text-columns p:last-child {
        margin-bottom: 0;
    }

    /* Estilos móviles para columnas */
    @media (max-width: 768px) {
        .xioleni-text-columns[data-column-count="2"] {
            column-count: 1;
            -webkit-column-count: 1;
            -moz-column-count: 1;
        }
    }

    /* Estilos para el nuevo contenedor de columnas */
    .xioleni-text-columns-container {
        display: flex;
        width: 100%;
        margin: 1em 0;
        position: relative;
        line-height: 1.5;
        gap: 20px;
        clear: both;
    }

    .xioleni-column-left,
    .xioleni-column-right {
        flex: 1;
        overflow: hidden;
        position: relative;
        min-height: 1em;
        padding: 0.1em 0;
    }

    /* Estilos para títulos en columnas */
    .xioleni-column-left h1, .xioleni-column-left h2, .xioleni-column-left h3,
    .xioleni-column-left h4, .xioleni-column-left h5, .xioleni-column-left h6,
    .xioleni-column-right h1, .xioleni-column-right h2, .xioleni-column-right h3,
    .xioleni-column-right h4, .xioleni-column-right h5, .xioleni-column-right h6 {
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    /* Estilos para párrafos en columnas */
    .xioleni-column-left p,
    .xioleni-column-right p {
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    /* Estilos para dispositivos móviles */
    @media (max-width: 768px) {
        .xioleni-text-columns-container {
            flex-direction: column;
            gap: 10px;
        }
        
        .xioleni-text-columns-container > div[style*="position: absolute"] {
            display: none; /* Ocultar el separador en vista móvil */
        }
    }

    #xioleni-editor.limite-excedido {
        border: 2px solid #dc3545 !important;
        background-color: rgba(255, 240, 240, 0.7) !important;
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.5) !important; 
    }

    /* Estilo para mostrar la alerta de límite excedido */
    .xioleni-alerta-limite {
        background-color: #dc3545;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        margin: 10px 0;
        text-align: center;
        font-weight: bold;
        display: none;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        font-size: 14px;
    }

    .xioleni-alerta-limite.visible {
        display: block;
        animation: xioleni-parpadeo 2s ease-in-out;
    }

    @keyframes xioleni-parpadeo {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

    /* Asegurar que los selectores de imágenes y botones de borrar no aparezcan en posts publicados */
    .xioleni-post-content .xioleni-image-select-box,
    .xioleni-post-content .xioleni-media-remove-btn {
        display: none !important;
    }
    
    /* Eliminar explícitamente bordes azules y estilos de selección en imágenes publicadas */
    .xioleni-post-content .xioleni-media-container,
    .xioleni-post-content .xioleni-grid-item,
    .xioleni-post-content img {
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
    }

    /* Forzar tamaño exacto para imágenes grandes */
    .xioleni-post-content img[data-size="large"],
    #xioleni-editor img[data-size="large"],
    .xioleni-media-container img[data-size="large"] {
        width: min(550px, 100%) !important;
        height: auto !important;
        max-width: 550px !important;
        max-height: none !important;
        aspect-ratio: 1/1 !important;
        object-fit: cover !important;
    }
    
    /* También aplicar el mismo tamaño para imágenes sin tamaño específico */
    .xioleni-post-content .xioleni-media-container img:not([data-size]),
    #xioleni-editor .xioleni-media-container img:not([data-size]) {
        width: min(550px, 100%) !important;
        height: auto !important;
        max-width: 550px !important;
        max-height: none !important;
        aspect-ratio: 1/1 !important;
        object-fit: cover !important;
    }
    
    /* Videos deben mantener su proporción original */
    #xioleni-editor video,
    .xioleni-media-container video,
    .xioleni-post-content video {
        width: 100% !important;
        height: auto !important;
        max-width: 550px !important;
        max-height: 550px !important;
        aspect-ratio: unset !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Responsive para dispositivos móviles */
    @media (max-width: 768px) {
        .xioleni-post-content img[data-size="large"],
        #xioleni-editor img[data-size="large"],
        .xioleni-media-container img[data-size="large"],
        .xioleni-post-content .xioleni-media-container img:not([data-size]),
        #xioleni-editor .xioleni-media-container img:not([data-size]) {
            width: min(300px, 100%) !important;
            height: auto !important;
            max-width: 300px !important;
            max-height: none !important;
            margin: 0 auto !important;
            display: block !important;
        }
        
        /* Videos en móviles mantienen proporción */
        #xioleni-editor video,
        .xioleni-media-container video,
        .xioleni-post-content video {
            width: 100% !important;
            height: auto !important;
            max-width: 300px !important;
            max-height: 300px !important;
            aspect-ratio: unset !important;
            object-fit: contain !important;
            display: block !important;
            margin: 0 auto !important;
        }
    }

    /* Forzar tamaño exacto para imágenes medianas */
    .xioleni-post-content img[data-size="medium"],
    #xioleni-editor img[data-size="medium"],
    .xioleni-media-container img[data-size="medium"] {
        width: 245px !important;
        height: 245px !important;
        max-width: 245px !important;
        max-height: 245px !important;
        aspect-ratio: 1/1 !important;
        object-fit: cover !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .xioleni-post-content video[data-size="medium"],
    #xioleni-editor video[data-size="medium"],
    .xioleni-media-container video[data-size="medium"] {
        width: auto !important;
        height: auto !important;
        max-width: 245px !important;
        max-height: 245px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Estilos simplificados para la nueva implementación de columnas */
    .xioleni-column-container {
        column-count: 2 !important;
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-gap: 2em !important;
        -webkit-column-gap: 2em !important; 
        -moz-column-gap: 2em !important;
        column-fill: balance !important;
        -webkit-column-fill: balance !important;
        -moz-column-fill: balance !important;
        width: 100% !important;
        margin: 1em 0 !important;
        padding: 0 !important;
        border: none !important;
        display: block !important;
    }

    /* Asegurar que el contenido dentro de las columnas se divida correctamente */
    .xioleni-column-container * {
        break-inside: auto !important;
        -webkit-column-break-inside: auto !important;
        page-break-inside: auto !important;
    }

    /* Asegurar compatibilidad con navegadores antiguos */
    .xioleni-column-container p, 
    .xioleni-column-container h1,
    .xioleni-column-container h2,
    .xioleni-column-container h3,
    .xioleni-column-container h4,
    .xioleni-column-container h5,
    .xioleni-column-container h6 {
        margin-top: 0 !important;
    }

    /* Versión para el contenido publicado */
    .xioleni-post-content .xioleni-column-container {
        column-count: 2 !important;
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-gap: 2em !important;
        -webkit-column-gap: 2em !important;
        -moz-column-gap: 2em !important;
        column-fill: balance !important;
        -webkit-column-fill: balance !important;
        -moz-column-fill: balance !important;
        width: 100% !important;
        margin: 1em 0 !important;
        padding: 0 !important;
        border: none !important;
        display: block !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .xioleni-column-container,
        .xioleni-post-content .xioleni-column-container {
            column-count: 1 !important;
            -webkit-column-count: 1 !important;
            -moz-column-count: 1 !important;
        }
    }

    /* Garantizar que los contenedores de imágenes en columnas no sean editables */
    .xioleni-images-double-column,
    .xioleni-images-single-column {
        pointer-events: auto !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }

    /* Garantizar que los párrafos antes y después de las imágenes sean editables */
    p[data-xioleni-editable="true"] {
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        cursor: text !important;
        min-height: 1.5em !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
        z-index: 5 !important;
        position: relative !important;
    }

    /* Hacer visibles los párrafos editables cuando reciben foco */
    p[data-xioleni-editable="true"]:focus,
    p[data-xioleni-editable="true"]:hover {
        outline: none !important;
        background-color: transparent !important;
        min-height: 1.5em !important;
    }

    /* Asegurar que los párrafos vacíos tengan altura mínima */
    p[data-xioleni-editable="true"]:empty,
    p[data-xioleni-editable="true"] br:only-child {
        min-height: 1.5em !important;
        display: block !important;
    }

    /* Mejorar la visualización del cursor en párrafos editables */
    p[data-xioleni-editable="true"] {
        caret-color: auto !important;
    }

    /* Reglas específicas para párrafos antes y después de contenedores de imágenes */
    .xioleni-images-double-column + p[data-xioleni-editable="true"],
    .xioleni-images-single-column + p[data-xioleni-editable="true"],
    p[data-xioleni-editable="true"] + .xioleni-images-double-column,
    p[data-xioleni-editable="true"] + .xioleni-images-single-column {
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        cursor: text !important;
        min-height: 1.5em !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
        z-index: 10 !important; /* Mayor z-index para asegurar que está por encima */
        position: relative !important;
        border-top: 1px dashed rgba(200, 200, 200, 0.3) !important;
        border-bottom: 1px dashed rgba(200, 200, 200, 0.3) !important;
        padding: 5px 0 !important;
    }

    /* Hacer más visibles estos párrafos específicos al pasar el ratón */
    .xioleni-images-double-column + p[data-xioleni-editable="true"]:hover,
    .xioleni-images-single-column + p[data-xioleni-editable="true"]:hover,
    p[data-xioleni-editable="true"] + .xioleni-images-double-column:hover,
    p[data-xioleni-editable="true"] + .xioleni-images-single-column:hover {
        background-color: transparent !important;
    }

    /* Añadir indicación visual cuando se recibe foco */
    .xioleni-images-double-column + p[data-xioleni-editable="true"]:focus,
    .xioleni-images-single-column + p[data-xioleni-editable="true"]:focus {
        outline: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Asegurar que no hay elementos que bloqueen la edición */
    .xioleni-images-double-column,
    .xioleni-images-single-column {
        position: relative !important;
        z-index: 1 !important; /* Menor z-index para que los párrafos editables estén por encima */
    }