.xioleni-tw-effect.entrada {
        animation: xioleni-tw-typing 3s steps(40) forwards;
    }

    .xioleni-tw-effect.bucle {
        animation: xioleni-tw-typing-loop 6s steps(40) infinite;
    }

    @keyframes xioleni-tw-typing {
        from { 
            max-width: 0;
        }
        to { 
            max-width: 100%;
        }
    }

    @keyframes xioleni-tw-typing-loop {
        0% { 
            max-width: 0;
        }
        40% { 
            max-width: 100%;
        }
        60% { 
            max-width: 100%;
        }
        100% { 
            max-width: 0;
        }
    }

    /* Asegurar compatibilidad con alineación */
    [class*="xioleni-text-"] .xioleni-tw-master-container,
    .xioleni-tw-master-container {
        text-align: inherit !important;
        display: inline !important;
    }

    /* ===== INICIO: CSS EFECTOS DE INTERACCIÓN MEJORADOS ===== */

/* ===== EFECTO MÁQUINA DE ESCRIBIR SIN CURSOR ===== */
.xioleni-type-container {
    display: inline !important;
    position: relative;
    unicode-bidi: plaintext;
    letter-spacing: normal !important;
    white-space: nowrap !important;
}

.xioleni-type-effect {
    display: inline-block !important;
    overflow: hidden;
    vertical-align: bottom !important;
    position: relative;
}

.xioleni-type-effect.entrada {
    animation: xioleni-type-animation 3s steps(30) forwards;
}

.xioleni-type-effect.bucle {
    animation: xioleni-type-loop 6s steps(30) infinite;
}

@keyframes xioleni-type-animation {
    from { 
        clip-path: inset(0 100% 0 0);
    }
    to { 
        clip-path: inset(0 0 0 0);
    }
}

@keyframes xioleni-type-loop {
    0% { 
        clip-path: inset(0 100% 0 0);
    }
    40% { 
        clip-path: inset(0 0 0 0);
    }
    60% { 
        clip-path: inset(0 0 0 0);
    }
    100% { 
        clip-path: inset(0 100% 0 0);
    }
}

/* Efecto Expandir Letras */
.xioleni-text-interaccion-expand {
    transition: letter-spacing 0.3s ease !important;
    color: inherit !important;  /* Heredar el color del padre */
}
.xioleni-text-interaccion-expand:hover {
    letter-spacing: 2px !important;
    color: inherit !important;  /* Mantener el color al hacer hover */
}

/* ===== FIN EFECTOS DE TEXTO POR CARÁCTER ===== */

/* Efecto Desenfoque */
.xioleni-text-interaccion-blur:hover {
    color: inherit !important;
    filter: blur(1px) !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
}

/* Efecto Arcoíris */
.xioleni-text-interaccion-rainbow:hover {
    background-image: linear-gradient(to right, 
        red, orange, yellow, green, blue, indigo, rgb(255, 0, 191)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    display: inline-block !important;
}

/* Efecto Rotar */
.xioleni-text-interaccion-rotate:hover {
    transform: rotate(5deg);
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Efecto Arcoíris mejorado */
.xioleni-text-interaccion-rainbow {
    position: relative;
    display: inline-block !important;
}

.xioleni-text-interaccion-rainbow .xioleni-char-effect {
    display: inline-block !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    background-image: linear-gradient(
        to right,
        #fd0087, #ff8000, #ffff00, 
        #00ff00, #00ffff, #0000ff, 
        #8000ff, #ff00ff, hsl(0, 98%, 50%)
    );
    background-size: 800% 100%;
    animation: xioleni-rainbow-scroll 3s linear infinite;
}

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



/* Estilos para el panel de colores */
.xioleni-color-panel {
    display: none;
    position: absolute;
    top: 50px;
    left: 120px;
    width: 280px;
    background-color: #222;
    border-radius: 10px;
    padding: 15px;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.xioleni-color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #444;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.xioleni-color-option:hover {
    transform: scale(1.1);
    border-color: #fff;
}

#xioleni-color-btn {
    background-color: #009bb6b8 !important;
}

#xioleni-color-btn:hover {
    background-color: #009bb6b8 !important;
    box-shadow: 0 0 8px 2px #00d4ff !important;
}

#xioleni-color-btn:active,
#xioleni-color-btn:focus {
    background-color: #009bb6b8 !important;
    box-shadow: 0 0 12px 3px #00d4ff !important;
    outline: none !important;
}

/* Reglas para solucionar problemas de interlineado y cursores */
/* ---------------------------------------------------- */

/* Forzar interlineado consistente en todas las publicaciones */
.xioleni-post-content {
    line-height: 1.00 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.xioleni-post-content * {
    line-height: inherit !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Eliminar cursores adicionales en alineaciones centro y derecha */
#xioleni-editor div[style*="text-align: center"]::after,
#xioleni-editor div[style*="text-align: right"]::after,
#xioleni-editor div[style*="text-align: justify"]::after {
    content: none !important;
    display: none !important;
}

/* Evitar contenido adicional después de divs alineados */
#xioleni-editor div[style*="text-align"] {
    position: relative !important;
}

/* Asegurar que los divs alineados no tengan altura excesiva */
#xioleni-editor div[style*="text-align"],
.xioleni-post-content div[style*="text-align"] {
    min-height: 1em !important; /* Altura mínima consistente */
    line-height: 1.12 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mejorar visibilidad del cursor en divs alineados */
#xioleni-editor div[style*="text-align"]:focus {
    outline: none !important;
}

/* Forzar interlineado en publicaciones y elementos editados */
#xioleni-editor,
.xioleni-post-content,
.xioleni-post {
    line-height: 1.00 !important;
    letter-spacing: 0.015em;
    font-family: Verdana, sans-serif;
    font-weight: 400;
}

/* Reglas para alineaciones específicas */
.xioleni-text-center,
.xioleni-text-right,
.xioleni-text-justify,
.xioleni-text-left {
    line-height: 1.00 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 1em !important;
}

/* Estilos específicos para prevenir interlineado excesivo */
.xioleni-editor-publicado p,
.xioleni-editor-publicado div,
.xioleni-editor-publicado br,
.xioleni-post-content p,
.xioleni-post-content div,
.xioleni-post-content br {
    line-height: 1.00 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Eliminar espacio adicional entre los divs de texto */
#xioleni-editor div + div,
.xioleni-editor-publicado div + div,
.xioleni-post-content div + div {
    margin-top: 0 !important;
}

/* Corregir problemas de interlineado excesivo en Firefox */
@-moz-document url-prefix() {
    .xioleni-post-content,
    .xioleni-post-content *,
    #xioleni-editor,
    #xioleni-editor * {
        line-height: 1.08 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #xioleni-editor div[style*="text-align"],
    .xioleni-post-content div[style*="text-align"] {
        display: block !important;
        position: relative !important;
    }
}

/* ===== CORRECCIONES PARA ESPACIADO VERTICAL ===== */
/* Reducir ligeramente el espacio entre divs consecutivos */
#xioleni-editor div + div {
    margin-top: -2px;
}

/* Aumentar ligeramente el espacio para texto al presionar enter */
[data-xioleni-new-line="true"] {
    margin-top: -2px !important;
}

/* Ajustar el espacio entre texto grande y pequeño */
#xioleni-editor div:has(span[style*="font-size: 2"]) + div,
#xioleni-editor div:has(span[style*="font-size: 3"]) + div,
#xioleni-editor div:has(span[style*="font-size: 4"]) + div,
#xioleni-editor div:has(span[style*="font-size: 5"]) + div,
#xioleni-editor div:has(span[style*="font-size: 6"]) + div {
    margin-top: -3px !important;
}

/* Ajustes finos para línea base en tamaños grandes */
#xioleni-editor span[style*="font-size: 24px"] {
    line-height: 1.1;
    vertical-align: baseline;
}

#xioleni-editor span[style*="font-size: 32px"] {
    line-height: 1.05;
    vertical-align: baseline;
}

#xioleni-editor span[style*="font-size: 48px"] {
    line-height: 1;
    vertical-align: baseline;
}

#xioleni-editor span[style*="font-size: 56px"] {
    line-height: 0.95;
    vertical-align: baseline;
}

#xioleni-editor span[style*="font-size: 64px"] {
    line-height: 0.9;
    vertical-align: baseline;
}

/* Estilo específico para BR dentro del editor - CORREGIDO */
#xioleni-editor br {
    content: '' !important;
    display: block !important; /* Forzar display block para asegurar salto de línea */
    margin: 0 !important;
    padding: 0 !important;
    height: 0.8em !important; /* Altura reducida para menor espaciado */
    width: 100% !important; /* Asegurar que ocupa toda la anchura */
    clear: both !important; /* Prevenir elementos flotantes alrededor */
}

/* Prevenir espacios adicionales en texto publicado */
.xioleni-post-content br {
    content: '' !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0.2em !important;
}

/* Reglas para párrafos (tanto escritos como pegados) */
#xioleni-editor p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.08 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: block !important;
    font-weight: 400;
}

/* Reglas para párrafos creados con Enter */
#xioleni-editor p[data-xioleni-enter="true"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.08 !important;
    margin-bottom: 0 !important;
    display: block !important;
}

/* Reglas para párrafos pegados */
#xioleni-editor p[data-xioleni-paste="true"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.08 !important;
    margin-bottom: 0 !important;
    display: block !important;
    user-select: text !important;
    cursor: text !important;
    min-height: 1em !important;
    white-space: pre-wrap !important;
}

/* Garantizar que estos estilos se mantienen en la publicación */
.xioleni-post-content p,
.xioleni-editor-publicado p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.08 !important;
    margin-bottom: 0 !important;
    display: block !important;
    min-height: 0 !important;
    font-weight: 400;
}

/* Garantizar que los párrafos pegados sean editables */
#xioleni-editor p[data-xioleni-editable="true"] {
    user-select: text !important;
    cursor: text !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* Preservar específicamente los saltos de línea en texto pegado */
.xioleni-post-content p[data-xioleni-paste],
.xioleni-editor-publicado p[data-xioleni-paste] {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.08 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    visibility: visible !important;
    white-space: pre-wrap !important;
    font-weight: 400;
}

/* Preservar específicamente los saltos de línea creados con Enter */
.xioleni-post-content p[data-xioleni-enter],
.xioleni-editor-publicado p[data-xioleni-enter] {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.08 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    visibility: visible !important;
    white-space: pre-wrap !important;
    font-weight: 400;
}

#xioleni-editor p[data-xioleni-editable="true"],
#xioleni-editor p[data-xioleni-editable="true"] * {
    text-shadow: none !important;
}

#xioleni-editor [data-xioleni-paste],
#xioleni-editor [data-xioleni-paste] *,
#xioleni-editor p,
#xioleni-editor p * {
    text-shadow: none !important;
}

/* Asegurar que los espacios se mantienen en el muro */
.xioleni-post-content p:empty,
.xioleni-post-content p:only-child(br),
.xioleni-post-content p[data-xioleni-space="true"],
.xioleni-editor-publicado p:empty,
.xioleni-editor-publicado p:only-child(br),
.xioleni-editor-publicado p[data-xioleni-space="true"] {
    min-height: 0.8em !important;
    height: 0.8em !important;
    display: block !important;
    margin-bottom: 0 !important;
    visibility: visible !important;
}

/* Corregir problemas de alineación al dar Enter */
#xioleni-editor [style*="text-align: center"] {
    text-align: center !important;
    text-align-last: center !important;
    width: 100% !important;
    display: block !important;
}

#xioleni-editor [style*="text-align: right"] {
    text-align: right !important;
    text-align-last: right !important;
    width: 100% !important;
    display: block !important;
}

#xioleni-editor [style*="text-align: justify"] {
    text-align: justify !important;
    text-align-last: justify !important;
    width: 100% !important;
    display: block !important;
}

/* Corregir espaciado entre elementos - UNIFORME PARA TODOS */
#xioleni-editor p + p,
#xioleni-editor div + div,
#xioleni-editor div + p,
#xioleni-editor p + div {
    margin-top: 0.25em !important;
    margin-bottom: 0 !important;
}

/* Eliminar completamente cualquier espaciado conflictivo */
#xioleni-editor div + div {
    margin-top: 0.25em !important;
}

/* Eliminar reglas que puedan causar diferencias entre primera y siguientes líneas */
[data-xioleni-new-line="true"] {
    margin-top: 0.25em !important;
}

/* Estilos para párrafos vacíos (con preservación de altura) */
#xioleni-editor p:empty {
    min-height: 0.6em !important;
    line-height: 1.00 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Garantizar que estos estilos se mantienen en la publicación */
.xioleni-post-content p,
.xioleni-editor-publicado p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.00 !important;
    min-height: 0 !important;
    display: block !important;
}

/* Corregir problemas de alineación al dar Enter */
#xioleni-editor [style*="text-align: center"] {
    text-align: center !important;
    text-align-last: center !important;
    width: 100% !important;
    display: block !important;
}

#xioleni-editor [style*="text-align: right"] {
    text-align: right !important;
    text-align-last: right !important;
    width: 100% !important;
    display: block !important;
}

#xioleni-editor [style*="text-align: justify"] {
    text-align: justify !important;
    text-align-last: justify !important;
    width: 100% !important;
    display: block !important;
}

/* Corregir espaciado entre elementos */
#xioleni-editor br {
    display: block !important;
    height: 0.2em !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Estilos específicos para interlineado */
#xioleni-editor span[style*="line-height"] {
    display: inline-block !important;
    vertical-align: baseline !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajustes para diferentes valores de interlineado */
#xioleni-editor span[style*="line-height: 1"] {
    line-height: 1 !important;
}

#xioleni-editor span[style*="line-height: 1.2"] {
    line-height: 1.2 !important;
}

#xioleni-editor span[style*="line-height: 1.5"] {
    line-height: 1.5 !important;
}

#xioleni-editor span[style*="line-height: 1.8"] {
    line-height: 1.8 !important;
}

#xioleni-editor span[style*="line-height: 2"] {
    line-height: 2 !important;
}

/* Ajuste para interlineados en muro publicado */
.xioleni-post-content span[style*="line-height"] {
    display: inline-block !important;
    white-space: normal !important;
}

/* Estilos específicos para espaciado entre letras */
#xioleni-editor span[style*="letter-spacing"] {
    display: inline !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Corrección para espaciados negativos */
#xioleni-editor span[style*="letter-spacing: -"] {
    display: inline !important;
}

/* Ajuste para espaciados en muro publicado */
.xioleni-post-content span[style*="letter-spacing"] {
    display: inline !important;
    vertical-align: baseline !important;
}

/* Cambiar la apariencia del panel de interlineado */
.xioleni-lineheight-panel {
    position: fixed !important; /* Cambiado a fixed para evitar problemas de posicionamiento */
    display: none !important;
    background-color: #333 !important;
    color: white !important;
    padding: 15px !important;
    width: 220px !important;
    border-radius: 10px !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.7) !important;
    z-index: 2000 !important; /* Valor alto para estar por encima de todo */
    max-height: none !important;
    overflow: visible !important;
}

/* Contenedor del slider */
.xioleni-slider-container {
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Etiquetas de valores */
.xioleni-slider-labels {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 4px !important;
    padding: 0 2px !important;
    overflow-x: hidden !important;
}

.xioleni-slider-labels span {
    font-size: 8px !important;
    color: #ccc !important;
    text-align: center !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

/* Slider principal */
.xioleni-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 8px !important;
    background: linear-gradient(to right, 
        #470b24, /* -3 */
        #009cb61c, /* -2 */
        #951060, /* -1 */
        #333,    /* 0 centro */
        #2a6e64, /* +1 */
        #2ca695, /* +2 */
        #34d1bc  /* +3 */
    ) !important;
    outline: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}

/* Botón de aplicar kerning */
.xioleni-apply-kerning {
    background-color: #692547 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 8px !important;
    margin-top: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: background-color 0.2s !important;
    text-align: center !important;
    width: 100% !important;
}

.xioleni-apply-kerning:hover {
    background-color: #951361 !important;
}

    /* Mejoras para el panel de color en dispositivos móviles */
    @media (max-width: 768px) {
        #xioleni-color-panel {
            width: 90% !important;
            max-width: 280px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            padding: 20px !important;
        }
        
        #xioleni-color-area {
            height: 160px !important; /* Área más grande para selección táctil */
            margin-bottom: 15px !important;
        }
        
        #xioleni-color-cursor {
            width: 20px !important; /* Cursor más grande para mejor visibilidad */
            height: 20px !important;
        }
        
        #xioleni-hue-slider {
            height: 25px !important; /* Slider más alto para facilitar el toque */
            margin-bottom: 15px !important;
        }
        
        #xioleni-hue-cursor {
            width: 10px !important;
            height: 29px !important;
            top: -2px !important;
        }
        
        #xioleni-alpha-input {
            height: 15px !important;
        }
        
        #xioleni-alpha-input::-webkit-slider-thumb {
            width: 20px !important;
            height: 20px !important;
        }
        
        #xioleni-apply-color {
            padding: 10px 15px !important;
            font-size: 16px !important;
            margin-left: auto !important;
        }
        
        .xioleni-color-label {
            font-size: 16px !important;
            margin-right: 10px !important;
        }
        
        #xioleni-color-preview {
            width: 25px !important;
            height: 25px !important;
            margin-right: 10px !important;
        }
    }

    /* Correcciones para evitar problemas de scroll en móviles al usar el selector de color */
    body.xioleni-color-selecting {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Asegurar que el panel de color se mantenga proporcional en dispositivos móviles */
    @media (max-width: 768px) {
        #xioleni-color-panel {
            width: 240px !important;
            max-width: 240px !important;
            padding: 8px !important;
        }
        
        #xioleni-color-area {
            height: 65px !important;
            min-height: 65px !important;
        }
        
        #xioleni-hue-slider, 
        #xioleni-alpha-input + div {
            height: 65px !important;
            width: 15px !important;
        }
    }
    
    @media (max-width: 480px) {
        #xioleni-color-panel {
            width: 200px !important;
            max-width: 200px !important;
            padding: 8px !important;
        }
        
        #xioleni-color-area {
            height: 65px !important;
            min-height: 65px !important;
        }
        
        #xioleni-hue-slider, 
        #xioleni-alpha-input + div {
            height: 65px !important;
            width: 14px !important;
        }
    }

    /* Garantizar que el alpha slider tenga el mismo ancho */
    #xioleni-alpha-input {
        width: 100%;
        height: 8px;
        background: linear-gradient(to right, transparent, currentColor);
        border-radius: 3px;
        -webkit-appearance: none;
        appearance: none;
        margin: 5px 0;
    }

    .xioleni-font-selector select {
        background-color: #333;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 5px;
        font-size: 14px;
        cursor: pointer;
        max-height: 110px; /* Alto para mostrar aproximadamente 3 opciones */
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #555 #333;
    }

    .xioleni-font-selector select option {
        padding: 8px;
        background-color: #333;
    }

    .xioleni-font-selector select option:hover {
        background-color: #555;
    }

    .xioleni-font-selector select::-webkit-scrollbar {
        width: 8px;
    }

    .xioleni-font-selector select::-webkit-scrollbar-track {
        background: #333;
        border-radius: 4px;
    }

    .xioleni-font-selector select::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 4px;
    }

    /* Regla específica para el panel de fuentes */
    #panel-fuentes {
        position: fixed !important;
        display: none;
        background-color: #333333;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.7);
        z-index: 9999 !important;
        width: 220px;
    }

    /* Media queries para dispositivos móviles y tablets */
    @media (max-width: 768px) {
        #panel-fuentes {
            width: 280px !important;
            max-width: 85vw !important;
        }
        
        .font-option {
            padding: 10px !important;
            font-size: 14px !important;
        }
    }

    /* Añadiendo estilos para las columnas */
    .xioleni-single-column,
    .xioleni-double-column {
        position: relative;
        width: 100%;
        clear: both;
        margin: 10px 0;
        box-sizing: border-box;
    }

    .xioleni-double-column {
        column-count: 2;
        column-gap: 20px;
        margin-bottom: 15px;
    }

    /* Evitar que los elementos dentro de las columnas se rompan */
    .xioleni-double-column p,
    .xioleni-double-column h1,
    .xioleni-double-column h2,
    .xioleni-double-column h3,
    .xioleni-double-column h4,
    .xioleni-double-column h5,
    .xioleni-double-column h6,
    .xioleni-double-column div:not(.xioleni-media-container) {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    /* Estilos para imágenes en columnas */
    .xioleni-images-single-column,
    .xioleni-images-double-column {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 15px 0;
        box-sizing: border-box;
        gap: 10px; /* Añadir gap uniforme para flex */
    }

    .xioleni-image-row {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 10px; /* Mantener consistencia con el gap definido en JS */
        gap: 10px; /* Espacio horizontal uniforme */
    }

    /* Asegurar que las imágenes dentro de las columnas mantienen proporciones */
    .xioleni-images-single-column img,
    .xioleni-images-double-column img {
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* Asegurar que las imágenes mantengan proporciones */
    }

    /* Ajustes para responsividad */
    @media (max-width: 768px) {
        .xioleni-double-column {
            column-gap: 15px;
        }
        
        /* Mantener espaciado consistente en tablets */
        .xioleni-image-row {
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .xioleni-images-double-column {
            gap: 8px;
        }
    }

    @media (max-width: 480px) {
        .xioleni-double-column {
            column-gap: 10px;
        }
        
        /* En móviles pequeños, reducir el espaciado pero mantenerlo coherente */
        .xioleni-image-row {
            gap: 5px;
            margin-bottom: 5px;
        }
        
        .xioleni-images-double-column {
            gap: 5px;
        }
        
        /* En móviles pequeños, las dos columnas de imágenes pueden ser más juntas */
        .xioleni-image-row > div {
            width: calc(50% - 2.5px);
        }
    }

    /* Constante de espaciado universal para todos los elementos */
    :root {
        --xioleni-spacing: 15px; /* Reducido de 30px a 15px para un espaciado más adecuado */
    }

    /* Estilos directos para las imágenes normales (sin columnas) */
    .xioleni-media-container {
        margin-bottom: var(--xioleni-spacing) !important;
        margin-top: 0 !important;
    }

    #xioleni-editor .xioleni-media-container {
        margin-bottom: var(--xioleni-spacing) !important;
    }

    .xioleni-post-content .xioleni-media-container {
        margin-bottom: var(--xioleni-spacing) !important;
    }

    /* Asegurarse que TODAS las fotos tengan espaciado */
    #xioleni-editor > img,
    #xioleni-editor > .xioleni-media-container,
    .xioleni-post-content > img,
    .xioleni-post-content > .xioleni-media-container {
        margin-bottom: var(--xioleni-spacing) !important;
        display: block !important;
    }

    /* Forzar el espaciado para contenedores de columnas */
    .xioleni-image-row {
        margin-bottom: var(--xioleni-spacing) !important;
        gap: var(--xioleni-spacing) !important;
    }

    /* Columnas simples con espaciado adecuado */
    .xioleni-images-single-column {
        gap: var(--xioleni-spacing) !important;
    }

    /* Forzar espaciado para todos los tipos de contenedores de imágenes */
    #xioleni-editor img:not(.xioleni-emoji-inline),
    .xioleni-post-content img:not(.xioleni-emoji-inline) {
        display: block !important;
        max-width: 100% !important;
    }

    /* Forzar espaciado para contenedores de imágenes directos */
    #xioleni-editor > .xioleni-media-container {
        margin-bottom: 15px !important;
    }

    /* Forzar espaciado para filas de columnas */
    #xioleni-editor .xioleni-image-row {
        margin-bottom: 15px !important;
    }

    /* Forzar espaciado para visualización en post */
    .xioleni-post-content img,
    .xioleni-post-content .xioleni-media-container {
        margin-bottom: 15px !important;
    }

    /* Espaciado entre posts */
    .xioleni-post {
        border: none !important;
        margin-bottom: 20px !important;
        overflow: hidden;
    }

    /* Forzar consistencia en contenedores de columnas */
    .xioleni-images-single-column,
    .xioleni-images-double-column {
        margin-bottom: 15px !important;
    }

    /* Espaciado explícito para el editor */
    #xioleni-editor .xioleni-media-container:not(:last-child),
    #xioleni-editor .xioleni-images-single-column:not(:last-child),
    #xioleni-editor .xioleni-images-double-column:not(:last-child) {
        margin-bottom: 15px !important;
    }

    /* Sobreescribir cualquier otra regla de margen para columnas */
    .xioleni-images-double-column .xioleni-image-row {
        margin-bottom: 15px !important;
    }

    /* Estilos para conservar interlineado en todos los contextos */
    .xioleni-post-content span[style*="line-height"],
    .xioleni-editor-publicado span[style*="line-height"] {
        display: inline-block !important;
        vertical-align: baseline !important;
        white-space: normal !important;
        line-height: inherit !important;
    }

    /* Forzar que se respeten los valores específicos de line-height */
    .xioleni-post-content span[style*="line-height: 1"],
    .xioleni-editor-publicado span[style*="line-height: 1"] {
        line-height: 1 !important;
    }

    .xioleni-post-content span[style*="line-height: 1.2"],
    .xioleni-editor-publicado span[style*="line-height: 1.2"] {
        line-height: 1.2 !important;
    }

    .xioleni-post-content span[style*="line-height: 1.5"],
    .xioleni-editor-publicado span[style*="line-height: 1.5"] {
        line-height: 1.5 !important;
    }

    .xioleni-post-content span[style*="line-height: 1.8"],
    .xioleni-editor-publicado span[style*="line-height: 1.8"] {
        line-height: 1.8 !important;
    }

    .xioleni-post-content span[style*="line-height: 2"],
    .xioleni-editor-publicado span[style*="line-height: 2"] {
        line-height: 2 !important;
    }

    /* Estilos para columnas */
    .xioleni-images-double-column {
        display: block;
        width: 100%;
        margin-bottom: 15px;
    }

    .xioleni-image-row {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 15px;
        gap: 15px;
    }

    .xioleni-image-row:last-child {
        margin-bottom: 0;
    }

    .xioleni-column-left, 
    .xioleni-column-right {
        width: calc(50% - 7.5px);
    }

    /* Estilos para columna única */
    .xioleni-images-single-column {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-bottom: 15px;
    }

    .xioleni-images-single-column .xioleni-media-container {
        margin: 0 !important;
    }

    /* Soporte mejorado para interlineado en muro publicado */
    .xioleni-post-content [data-xioleni-line-height],
    .xioleni-editor-publicado [data-xioleni-line-height] {
        display: inline-block !important;
        vertical-align: baseline !important;
        white-space: normal !important;
    }

    /* Asegurarse que se aplica cada valor específico */
    .xioleni-post-content [data-xioleni-line-height="1"],
    .xioleni-editor-publicado [data-xioleni-line-height="1"] {
        line-height: 1 !important;
    }

    .xioleni-post-content [data-xioleni-line-height="1.2"],
    .xioleni-editor-publicado [data-xioleni-line-height="1.2"] {
        line-height: 1.2 !important;
    }

    .xioleni-post-content [data-xioleni-line-height="1.5"],
    .xioleni-editor-publicado [data-xioleni-line-height="1.5"] {
        line-height: 1.5 !important;
    }

    .xioleni-post-content [data-xioleni-line-height="1.8"],
    .xioleni-editor-publicado [data-xioleni-line-height="1.8"] {
        line-height: 1.8 !important;
    }

    .xioleni-post-content [data-xioleni-line-height="2"],
    .xioleni-editor-publicado [data-xioleni-line-height="2"] {
        line-height: 2 !important;
    }

    /* Espaciado consistente para imágenes */
    #xioleni-editor .xioleni-media-container {
        margin-bottom: 15px !important;
        display: block !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !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-post-content .xioleni-media-container {
        margin-bottom: 15px !important;
        display: block !important;
        width: 100% !important;
    }

    /* Forzar espaciado para todas las imágenes */
    #xioleni-editor img:not(.xioleni-emoji-inline),
    .xioleni-post-content img:not(.xioleni-emoji-inline) {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Asegurar espacio entre imágenes apiladas */
    .xioleni-media-container + .xioleni-media-container {
        margin-top: 8px !important;
    }

    /* Espaciado para imágenes en columnas */
    .xioleni-images-single-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    .xioleni-images-double-column {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

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

    .xioleni-image-row:last-child {
        margin-bottom: 0 !important;
    }

    /* Garantizar que las columnas tienen el ancho correcto */
    .xioleni-column-left, 
    .xioleni-column-right {
        width: calc(50% - 7.5px) !important;
        display: block !important;
    }

    .xioleni-image-row:has(> .xioleni-column-right:not(:has(.xioleni-media-container))) {
        justify-content: center !important;
    }

    .xioleni-image-row:has(> .xioleni-column-right:not(:has(.xioleni-media-container))) > .xioleni-column-right {
        display: none !important;
    }

    .xioleni-image-row:has(> .xioleni-column-right:not(:has(.xioleni-media-container))) > .xioleni-column-left {
        width: 100% !important;
    }

    .xioleni-image-row:has(> .xioleni-column-left:not(:has(.xioleni-media-container))) {
        justify-content: center !important;
    }

    .xioleni-image-row:has(> .xioleni-column-left:not(:has(.xioleni-media-container))) > .xioleni-column-left {
        display: none !important;
    }

    .xioleni-image-row:has(> .xioleni-column-left:not(:has(.xioleni-media-container))) > .xioleni-column-right {
        width: 100% !important;
    }

    /* Reglas para párrafos vacíos (para crear espacio adicional) */
#xioleni-editor p:empty,
#xioleni-editor p:only-child(br) {
    min-height: 0.9em !important;
    height: auto !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
    display: block !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    visibility: visible !important;
}

/* Reglas para párrafos con atributo de espacio en blanco */
#xioleni-editor p[data-xioleni-space="true"] {
    min-height: 1.5em !important; 
    height: auto !important;
    margin-bottom: 0 !important;
    display: block !important;
    visibility: visible !important;
}

/* Asegurar que los espacios se mantienen en el muro */
.xioleni-post-content p:empty,
.xioleni-post-content p:only-child(br),
.xioleni-post-content p[data-xioleni-space="true"],
.xioleni-editor-publicado p:empty,
.xioleni-editor-publicado p:only-child(br),
.xioleni-editor-publicado p[data-xioleni-space="true"] {
    min-height: 1.2em !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 0 !important;
    visibility: visible !important;
}

    /* Corregir problemas de alineación al dar Enter */
    #xioleni-editor [style*="text-align: center"] {
        text-align: center !important;
        text-align-last: center !important;
        width: 100% !important;
        display: block !important;
    }

    #xioleni-editor [style*="text-align: right"] {
        text-align: right !important;
        text-align-last: right !important;
        width: 100% !important;
        display: block !important;
    }

    #xioleni-editor [style*="text-align: justify"] {
        text-align: justify !important;
        text-align-last: justify !important;
        width: 100% !important;
        display: block !important;
    }

    #xioleni-editor br {
        display: inline !important;
    }

    /* Estilos específicos para interlineado */
    #xioleni-editor span[style*="line-height"] {
        display: inline-block !important;
        vertical-align: baseline !important;
        white-space: normal !important;
        line-height: inherit !important;
    }

    /* Ajustes para diferentes valores de interlineado */
    #xioleni-editor span[style*="line-height: 1"] {
        line-height: 1 !important;
    }

    #xioleni-editor span[style*="line-height: 1.2"] {
        line-height: 1.2 !important;
    }

    #xioleni-editor span[style*="line-height: 1.5"] {
        line-height: 1.5 !important;
    }

    #xioleni-editor span[style*="line-height: 1.8"] {
        line-height: 1.8 !important;
    }

    #xioleni-editor span[style*="line-height: 2"] {
        line-height: 2 !important;
    }

    /* Ajuste para interlineados en muro publicado */
    .xioleni-post-content span[style*="line-height"] {
        display: inline-block !important;
        white-space: normal !important;
    }

    /* Estilos específicos para espaciado entre letras */
    #xioleni-editor span[style*="letter-spacing"] {
        display: inline !important;
        vertical-align: baseline !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Corrección para espaciados negativos */
    #xioleni-editor span[style*="letter-spacing: -"] {
        display: inline !important;
    }

    /* Ajuste para espaciados en muro publicado */
    .xioleni-post-content span[style*="letter-spacing"] {
        display: inline !important;
        vertical-align: baseline !important;
    }

    /* Cambiar la apariencia del panel de interlineado */
    .xioleni-lineheight-panel {
        position: fixed !important; /* Cambiado a fixed para evitar problemas de posicionamiento */
        display: none !important;
        background-color: #333 !important;
        color: white !important;
        padding: 15px !important;
        width: 220px !important;
        border-radius: 10px !important;
        box-shadow: 0 0 15px rgba(0,0,0,0.7) !important;
        z-index: 2000 !important; /* Valor alto para estar por encima de todo */
        max-height: none !important;
        overflow: visible !important;
    }

    /* Contenedor del slider */
    .xioleni-slider-container {
        padding: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* Etiquetas de valores */
    .xioleni-slider-labels {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin-bottom: 4px !important;
        padding: 0 2px !important;
        overflow-x: hidden !important;
    }

    .xioleni-slider-labels span {
        font-size: 8px !important;
        color: #ccc !important;
        text-align: center !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Slider principal */
    .xioleni-slider {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        height: 8px !important;
        background: linear-gradient(to right, 
            #470b24, /* -3 */
            #009cb61c, /* -2 */
            #951060, /* -1 */
            #333,    /* 0 centro */
            #2a6e64, /* +1 */
            #2ca695, /* +2 */
            #34d1bc  /* +3 */
        ) !important;
        outline: none !important;
        border-radius: 10px !important;
        cursor: pointer !important;
    }

    /* Botón de aplicar kerning */
    .xioleni-apply-kerning {
        background-color: #692547 !important;
        color: white !important;
        border: none !important;
        border-radius: 5px !important;
        padding: 8px !important;
        margin-top: 4px !important;
        cursor: pointer !important;
        font-weight: bold !important;
        transition: background-color 0.2s !important;
        text-align: center !important;
        width: 100% !important;
    }

    .xioleni-apply-kerning:hover {
        background-color: #951361 !important;
    }

    /* Estilos específicos para botones y línea separadora según el fondo */
    /* Fondos claros */
    .xioleni-post[style*="background-color: rgb(235, 249, 249)"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: #ebf9f9"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: #9dbac5"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: rgb(157, 186, 197)"] .xioleni-post-action-btn {
        color: #3c3c3b !important;
    }

    /* Fondos oscuros */
    .xioleni-post[style*="background-color: #21353d"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: #001a27"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: rgb(33, 53, 61)"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: rgb(0, 26, 39)"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: rgb(10, 17, 20)"] .xioleni-post-action-btn,
    .xioleni-post[style*="background-color: #122631"] .xioleni-post-action-btn {
        color: #ffffff !important;
    }

    /* Línea separadora para fondos claros */
    .xioleni-post[style*="background-color: rgb(235, 249, 249)"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: #ebf9f9"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: #9dbac5"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: rgb(157, 186, 197)"] .xioleni-post-actions {
        border-top: 1px solid rgba(60, 60, 59, 0.3) !important;
        padding-top: 10px !important;
        margin-top: 10px !important;
    }

    /* Línea separadora para fondos oscuros */
    .xioleni-post[style*="background-color: #21353d"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: #001a27"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: rgb(33, 53, 61)"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: rgb(0, 26, 39)"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: rgb(10, 17, 20)"] .xioleni-post-actions,
    .xioleni-post[style*="background-color: #122631"] .xioleni-post-actions {
        border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding-top: 10px !important;
        margin-top: 10px !important;
    }

    /* Botón de cerrar (X) para fondos claros */
    .xioleni-post[style*="background-color: rgb(235, 249, 249)"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: #ebf9f9"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: #9dbac5"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: rgb(157, 186, 197)"] .xioleni-post-delete {
        color: #3c3c3b !important;
    }

    /* Botón de cerrar (X) para fondos oscuros */
    .xioleni-post[style*="background-color: #21353d"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: #001a27"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: rgb(33, 53, 61)"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: rgb(0, 26, 39)"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: rgb(10, 17, 20)"] .xioleni-post-delete,
    .xioleni-post[style*="background-color: #122631"] .xioleni-post-delete {
        color: #ffffff !important;
    }

    /* Fecha/hora para fondos claros */
    .xioleni-post[style*="background-color: rgb(235, 249, 249)"] .xioleni-post-date,
    .xioleni-post[style*="background-color: #ebf9f9"] .xioleni-post-date,
    .xioleni-post[style*="background-color: #9dbac5"] .xioleni-post-date,
    .xioleni-post[style*="background-color: rgb(157, 186, 197)"] .xioleni-post-date {
        color: #3c3c3b !important;
    }

    /* Fecha/hora para fondos oscuros */
    .xioleni-post[style*="background-color: #21353d"] .xioleni-post-date,
    .xioleni-post[style*="background-color: #001a27"] .xioleni-post-date,
    .xioleni-post[style*="background-color: rgb(33, 53, 61)"] .xioleni-post-date,
    .xioleni-post[style*="background-color: rgb(0, 26, 39)"] .xioleni-post-date,
    .xioleni-post[style*="background-color: rgb(10, 17, 20)"] .xioleni-post-date,
    .xioleni-post[style*="background-color: #122631"] .xioleni-post-date {
        color: #ffffff !important;
    }

    /* REGLAS ELIMINADAS - Los colores coordinados se manejan en fix3.css */
    /* Las reglas de colores para xioleni-post-content ahora están en fix3.css para evitar conflictos */

/* Corrección para los bordes del muro */
.xioleni-post {
    border: none !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

.xioleni-post-content {
    border: none !important;
    overflow: hidden;
    /* Sombra sutil para separar del contenido de los botones */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    padding: 15px !important;
    position: relative !important;
}

.xioleni-editor-publicado {
    border: none !important;
}

/* Asegurar que sólo el editor tiene borde, no las publicaciones */
#xioleni-editor {
    border: 1px solid #ffffff;
    box-sizing: border-box;
}

/* Garantizar que los divs publicados no tengan bordes */
.xioleni-post-content div,
.xioleni-editor-publicado div {
    border: none !important;
}

/* Reglas universales para eliminar bordes */
.xioleni-post,
.xioleni-post-content *,
.xioleni-post *:not(.xioleni-post-content),
.xioleni-editor-publicado,
.xioleni-editor-publicado * {
    border: none !important;
    outline: none !important;
}

/* Eliminar sombras de elementos específicos pero no del contenedor principal */
.xioleni-post-content *,
.xioleni-post *:not(.xioleni-post-content),
.xioleni-editor-publicado,
.xioleni-editor-publicado * {
    box-shadow: none !important;
}

/* Regla para garantizar compatibilidad en todos los navegadores */
@-moz-document url-prefix() {
    .xioleni-post,
    .xioleni-post-content *,
    .xioleni-post *:not(.xioleni-post-content) {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
}

/* Evitar que los posts sean editables */
.xioleni-post,
.xioleni-post-content,
.xioleni-post-content *,
.xioleni-editor-publicado,
.xioleni-editor-publicado * {
    user-select: text !important; /* Permitir selección de texto */
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    cursor: text !important; /* Cursor de texto para selección */
    -webkit-user-modify: read-only !important; /* Safari */
    -moz-user-modify: read-only !important; /* Firefox */
    user-modify: read-only !important;
    contenteditable: false !important;
}

/* Asegurar que los botones tengan cursor de puntero */
.xioleni-post-action-btn,
.xioleni-post-delete {
    cursor: pointer !important;
}