/* Estilos para los botones organizadores y de fondo */
    .xioleni-organizer-option {
        background-color: #692547 !important;
        color: white !important;
    }
    
    .xioleni-organizer-option:hover {
        background-color: #951361 !important;
    }
    
    /* Preservar el color de los botones de eliminar */
    .xioleni-organizer-option[style*="background-color: #009cb61c"] {
    background-color: #009cb61c !important;
    }
    
    /* Resto de estilos generales */
    html {
        width: 100%;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0;
        padding: 0;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent !important;
    }

    body {
        background: transparent;
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100% !important;
        min-height: 100% !important;
        box-sizing: border-box;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 6px !important;
        background: transparent !important;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: transparent !important;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.35) !important;
        border-radius: 10px !important;
    }

    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }
    
.xioleni-editor-container {
        background: transparent;
        padding: 20px;
        padding-bottom: 100px !important;
        border-radius: 20px;
        margin: 0;
        color: #fff;
        font-family: Verdana, sans-serif;
        max-width: 660px;
        width: 100%;
        display: block;
        height: 100% !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
        max-height: 100% !important;
    }

    html.dark-mode .xioleni-editor-container,
    body.dark-mode .xioleni-editor-container {
        background: transparent;
    }

    @media (min-width: 700px) {
        .xioleni-editor-container {
            max-width: 720px;
        }
    }


    @media (max-width: 576px) {
        html,
        body {
            height: auto !important;
            overflow-y: auto !important;
        }

        .xioleni-editor-container {
            min-height: 0 !important;
            max-height: none !important;
            height: auto !important;
            overflow: visible !important;
            overscroll-behavior: auto !important;
            padding-bottom: 30px !important;
        }
    }
    .xioleni-editor-container::after {
        content: "";
        display: block;
        height: 20vh;
    }

    @media (max-width: 576px) {
        .xioleni-editor-container::after { display: none; }
    }
    
    /* --- Scrollbar delicado (Webkit/Chrome) --- */
    .xioleni-editor-container::-webkit-scrollbar {
        width: 4px !important; /* Aún más delgado y delicado */
        background: transparent !important; /* Fondo transparente */
        display: block !important; /* Forzar visualización */
    }
    
    .xioleni-editor-container::-webkit-scrollbar-track {
        background: transparent !important; /* Track transparente */
        margin: 10px 0 !important; /* Margen superior e inferior para que no toque los bordes redondeados */
    }
    
    .xioleni-editor-container::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3) !important; /* Color sutil */
        border-radius: 20px !important; /* Bordes muy redondeados */
    }
    
    .xioleni-editor-container::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.5) !important; /* Un poco más visible al hover */
    }

    /* Cuando el toolbar está visible, agregar espaciado superior */
    .xioleni-toolbar.visible ~ .xioleni-preview {
        margin-top: 20px;
    }
    
    /* Agregar padding al body solo cuando el toolbar está visible */
    body:has(.xioleni-toolbar.visible) {
        padding: 20px;
    }
    
    /* Eliminar padding del body en móviles para mantener ancho completo */
    @media (max-width: 768px) {
        body:has(.xioleni-toolbar.visible) {
            padding: 0 !important;
        }

        .xioleni-editor-container {
            border-radius: 26px;
        }

        .xioleni-toolbar {
            border-radius: 26px 26px 16px 16px;
            margin: -10px -10px 10px -10px;
        }
    }
    
    @media (max-width: 600px) {
        body:has(.xioleni-toolbar.visible) {
            padding: 0 !important;
        }
    }
    
    /* Agregar margin y padding completo al contenedor solo cuando el toolbar está visible */
    body:has(.xioleni-toolbar.visible) .xioleni-editor-container {
        margin: 20px 0;
        padding: 20px; /* Padding completo cuando el toolbar está visible */
    }
    
    /* Sobrescribir para móviles - mantener ancho completo */
    @media (max-width: 768px) {
        body:has(.xioleni-toolbar.visible) .xioleni-editor-container {
            width: 100% !important;
            max-width: 100% !important;
            margin: 5px !important;
            padding: 10px !important;
            box-sizing: border-box !important;
        }
    }
    
    @media (max-width: 600px) {
        body:has(.xioleni-toolbar.visible) .xioleni-editor-container {
            width: 100% !important;
            max-width: 100% !important;
            margin: 5px !important;
            padding: 10px !important;
            box-sizing: border-box !important;
        }
    }
    
    /* ... resto del CSS original ... */

    /* Toolbar Sticky pero sin afectar posición inicial */
    .xioleni-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 0;
        position: sticky !important; /* Sticky para que se mantenga visible al hacer scroll */
        top: 0 !important;
        z-index: 2000 !important; /* Z-index SUPERIOR a todo */
        background-color: #1b6a89; /* Fondo para que no se mezcle con el texto al scrollear */
        padding: 10px;
        border-radius: 0 0 10px 10px;
        margin: -20px -20px 10px -20px; /* Compensación de padding del contenedor */
        overflow: visible !important; /* Permitir que los paneles salgan */
    }

    /* Paneles de efectos y herramientas por encima de todo */
    .xioleni-effect-panel,
    .xioleni-sub-effect-panel,
    .xioleni-weight-panel,
    .xioleni-lineheight-panel,
    .xioleni-font-size-panel,
    .xioleni-organizer-panel {
        z-index: 3000 !important; /* Más alto que el toolbar */
    }
    
    /* Cuando el toolbar está visible, agregar margen inferior */
    .xioleni-toolbar.visible {
        margin-bottom: 15px; /* Aumentar margen cuando está visible */
    }

    .xioleni-toolbar button,
    .xioleni-toolbar select,
    .xioleni-toolbar input[type="color"] {
        padding: 7px;
        border-radius: 10px;
        border: none;
        background-color: #009bb6b7;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .xioleni-toolbar button:hover {
        background-color: #009bb6b8;
        cursor: pointer;
        box-shadow: 0 0 8px 2px #00d4ff;
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }

    .xioleni-toolbar button:active,
    .xioleni-toolbar button:focus {
        background-color: #009bb6b8;
        box-shadow: 0 0 12px 3px #00d4ff;
        transform: translateY(-1px);
        outline: none;
    }

    .xioleni-toolbar select:hover {
        background-color: #009bb6b8;
        cursor: pointer;
        box-shadow: 0 0 8px 2px #00d4ff;
        transform: translateY(-2px);
    }

    .xioleni-toolbar select:focus {
        background-color: #009bb6b8;
        box-shadow: 0 0 12px 3px #00d4ff;
        outline: none;
    }

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

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

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

    #xioleni-editor {
        min-height: 150px;
        background-color: transparent;
        padding: 5px 10px 10px 10px;
        color: #fff;
        border-radius: 10px !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        word-wrap: break-word;
        word-break: break-word;
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        border: none;
        outline: none !important;
        box-shadow: none !important;
        transition: border 0.3s, background-color 0.3s, color 0.3s;
        line-height: 1.00;
        white-space: normal !important;
        margin-top: 10px !important;
        flex-shrink: 0 !important;
        flex-grow: 1 !important;
    }

    #xioleni-editor:focus,
    #xioleni-editor:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 0px rgb(255, 255, 255) !important;
    }

    #xioleni-editor:not(:focus):not(:focus-visible) {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* FIX INFALIBLE PARA EXPANSIÓN: Pseudo-elemento clearfix */
    #xioleni-editor::after {
        content: " ";
        display: table;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    
    /* FIX CRÍTICO PARA FLOATS: Clearfix eliminado duplicado */
    
    /* Cuando el toolbar está visible, agregar margen superior al editor */
    body:has(.xioleni-toolbar.visible) #xioleni-editor {
        margin-top: 10px !important;
        padding-top: 16px !important;
    }

    /* Ajuste específico para móviles */
    @media (max-width: 768px) {
        body:has(.xioleni-toolbar.visible) #xioleni-editor {
            margin-top: 10px !important;
        }
    }

    /* Media query para móviles */
    @media (max-width: 768px) {
        #xioleni-editor {
            max-height: none !important; /* Eliminar límite en móviles */
        }
    }

    /* Clase para editor publicado (sin bordes) */
    .xioleni-editor-publicado {
        border: none !important;
        background-color: transparent !important;
    }

    /* Asegurar que ningún elemento dentro del editor afecte su ancho */
    
    /* Posicionamiento correcto de botones dentro de las imágenes */
    #xioleni-editor .xioleni-preview-item-inner {
        position: relative !important;
        display: inline-block !important;
        width: fit-content !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }
    
    #xioleni-editor .xioleni-preview-item-inner .xioleni-media-remove-btn,
    #xioleni-editor .xioleni-preview-item-inner .xioleni-image-select-box {
        position: absolute !important;
        z-index: 999 !important;
        width: 25px !important;
        height: 25px !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    
    /* Excepción para botones de control de imagen */
    #xioleni-editor .xioleni-media-remove-btn,
    #xioleni-editor .xioleni-image-select-box {
        max-width: none !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Contenedores de medios dentro del editor */
    #xioleni-editor .xioleni-media-container {
        position: relative;
        display: block;
        margin: 10px auto;
        max-width: 550px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden; /* Evita que el contenido se desborde */
    }
    
    /* Imágenes dentro del editor */
    #xioleni-editor img:not(.xioleni-emoji-inline) {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 10px !important; /* Curva de 10px */
        object-fit: cover !important; /* FORZAR RECORTE CUADRADO */
        aspect-ratio: 1 / 1 !important; /* SIEMPRE CUADRADAS */
    }

    /* Forzar que el contenedor de la grilla contenga floats pero permita overflow */
    #xioleni-editor .xioleni-image-grid,
    #xioleni-editor .xioleni-grid-wrapper {
        display: flow-root !important;
        clear: both !important;
        width: 100% !important;
        margin: 12px auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* FIX PARA EXPANSIÓN GRILLA: Pseudo-elemento clearfix */
    #xioleni-editor .xioleni-image-grid::after,
    #xioleni-editor .xioleni-grid-wrapper::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Items de la grilla - NO deben flotar en flexbox */
    #xioleni-editor .xioleni-grid-item {
        float: left !important;
        display: block !important;
        width: calc(50% - 5px) !important;
        position: relative !important;
        overflow: hidden !important;
        margin: 0 10px 2px 0 !important;
        box-sizing: border-box !important;
    }

    /* Corregir espaciado de grilla para evitar desorden */
    #xioleni-editor .xioleni-grid-item:nth-child(2n) {
        float: left !important;
        margin-right: 0 !important;
    }

    /* Corrección para la visibilidad de botones en imágenes de grilla dentro del editor */
    #xioleni-editor .xioleni-grid-item {
        overflow: hidden !important;
        z-index: 10 !important;
        padding: 0 !important;
        vertical-align: top !important;
    }

    #xioleni-editor .xioleni-grid-item .xioleni-image-select-box {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        width: 20px !important;
        height: 20px !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }

    #xioleni-editor .xioleni-grid-item .xioleni-media-remove-btn {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        width: 20px !important;
        height: 20px !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }

    #xioleni-editor .xioleni-grid-item .xioleni-media-remove-btn,
    #xioleni-editor .xioleni-grid-item .xioleni-image-select-box {
        z-index: 100 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    /* Regla especial para permitir que las imágenes NO cuadradas rompan el ancho si son muy anchas */
    /* PERO manteniéndose dentro del contenedor del editor */
    #xioleni-editor img:not(.size-medium):not(.size-large):not(.xioleni-grid-item img) {
         /* Si el usuario NO ha definido un tamaño específico y NO es una grilla */
         /* Permitimos que la imagen sea responsiva pero contenida */
         height: auto !important; 
         /* Si queremos forzar cuadrado siempre, mantenemos aspect-ratio: 1/1 */
         /* Si el problema es que se salen, max-width: 100% es la clave */
    }
    
    /* Contenedores de medios dentro del editor */
    #xioleni-editor .xioleni-media-container {
        position: relative !important;
        display: block !important;
        margin: 16px auto !important;
        max-width: 100% !important;
        width: fit-content !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        overflow: hidden !important;
        clear: both !important;
    }
    
    /* FIX PARA EXPANSIÓN: Pseudo-elemento clearfix forzado */
    #xioleni-editor .xioleni-media-container::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Clases de tamaño específicas */
    #xioleni-editor img.size-medium {
        width: 245px !important;
        height: 245px !important;
    }

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

    #xioleni-editor img.size-large {
        width: 480px !important;
        height: 480px !important;
    }

    /* Asegurar que las imágenes en grilla también sean cuadradas y tengan borde redondeado */
    .xioleni-grid-item img {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 10px !important; /* Curva de 10px para grilla */
    }

    .xioleni-preview {
        background: #004c5924;
        margin-top: 10px;
        padding: 10px;
        border-radius: 10px;
        color: #fff;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Cuando el toolbar está visible, agregar margen superior */
    .xioleni-toolbar.visible + .xioleni-preview {
        margin-top: 20px;
    }

    .xioleni-post-meta {
        font-size: 12px;
        color: #aaa;
        margin-bottom: 5px;
    }

    .xioleni-actions button {
        margin-right: 10px;
        margin-top: 5px;
        background-color: #009cb61c;
        color: #FFFFFF;
        font-weight: bold;
        border: none;
        padding: 8px 12px;
        border-radius: 10px;
        cursor: pointer;
    }

    .xioleni-actions button:active {
        background: linear-gradient(to bottom, #009cb61c, #ff5c00);
    }

    .xioleni-preview-img, .xioleni-preview-video {
        max-width: 100%;
        border-radius: 10px;
        margin: 10px auto;
        max-height: 500px;
        object-fit: contain;
        display: block;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        pointer-events: auto !important;
    }

    .xioleni-media-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin: 10px 0;
    }

    .xioleni-media-remove-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 16px;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    #xioleni-editor .xioleni-media-container .xioleni-media-remove-btn {
        opacity: 1 !important;
    }

    #xioleni-editor .xioleni-media-container {
        box-shadow: none !important;
        background: transparent !important;
    }

    #xioleni-editor .xioleni-media-container {
        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 {
        display: block !important;
    }

    #xioleni-editor .xioleni-media-container * {
        box-shadow: none !important;
    }

    /* Asegurar que los botones de selección sean visibles */
    .xioleni-image-select-box {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        background-color: rgba(255, 255, 255, 0.8); /* Fondo más opaco */
        border: 2px solid #00abfd;
        border-radius: 4px; /* Cuadrado redondeado en lugar de círculo */
        cursor: pointer;
        z-index: 100; /* Z-index alto para asegurar visibilidad */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Sombra para destacar */
    }

    #xioleni-editor .xioleni-media-container .xioleni-image-select-box {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        width: 20px !important;
        height: 20px !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }

    #xioleni-editor .xioleni-media-container .xioleni-media-remove-btn {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        width: 20px !important;
        height: 20px !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }

    #xioleni-editor p[data-xioleni-editable="true"] {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        margin: 0 !important;
        min-height: 0 !important;
        line-height: 1.00 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #xioleni-editor > p:first-child,
    #xioleni-editor > p[data-xioleni-editable="true"]:first-child {
        margin-top: 0 !important;
    }

    #xioleni-editor .xioleni-noneditable-spacer {
        display: block !important;
        width: 100% !important;
        height: 12px !important;
        clear: both !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    /* Reglas específicas para imágenes individuales - Dentro de la imagen */
    .xioleni-grid-wrapper .xioleni-grid-item:only-child {
        position: relative !important;
        overflow: visible !important; /* Permitir ver botones */
        display: block !important;
    }

    .xioleni-grid-wrapper .xioleni-grid-item:only-child .xioleni-media-remove-btn {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        z-index: 999 !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        line-height: 1 !important;
    }

    .xioleni-grid-wrapper .xioleni-grid-item:only-child .xioleni-image-select-box {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        z-index: 999 !important;
        width: 18px !important;
        height: 18px !important;
        transition: background-color 0.2s;
    }

    .xioleni-image-select-box.selected {
        background-color: #00abfd;
    }

    .xioleni-image-select-box.selected::after {
        content: "✓";
        color: white;
        font-weight: bold;
        font-size: 14px;
        display: block; /* Asegurar que el checkmark se muestre */
        line-height: 1; /* Alinear verticalmente */
        text-align: center; /* Alinear horizontalmente */
        pointer-events: none; /* Evitar que interfiera con clics */
    }

    /* Estilos específicos para el contenedor de vista previa del editor */
    .xioleni-preview-item {
        position: relative !important;
    }

    #xioleni-editor .xioleni-preview {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #xioleni-editor .xioleni-preview-item {
        display: block !important;
        width: fit-content !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    #xioleni-editor .xioleni-preview-item .xioleni-image-select-box {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
    }

    #xioleni-editor .xioleni-preview-item .xioleni-media-remove-btn {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
    }

    .xioleni-preview-item-inner .xioleni-media-remove-btn {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        z-index: 999 !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 16px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        color: white !important;
        border: none !important;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        opacity: 0 !important;
        transition: background-color 0.2s, opacity 0.3s ease !important;
    }
    
    .xioleni-preview-item-inner .xioleni-media-remove-btn:hover {
        background: rgba(255, 0, 0, 0.8) !important;
    }

    .xioleni-preview-item:hover .xioleni-preview-item-inner .xioleni-media-remove-btn {
        opacity: 1 !important;
    }

    .xioleni-preview-item-inner .xioleni-image-select-box {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        z-index: 10 !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transition: background-color 0.2s, opacity 0.3s ease !important;
        opacity: 0 !important;
    }

    .xioleni-preview-item:hover .xioleni-preview-item-inner .xioleni-image-select-box {
        opacity: 1 !important;
    }

    .xioleni-preview-item .xioleni-preview-item-inner .xioleni-image-select-box.selected {
        background-color: #00a1e0 !important;
        opacity: 1 !important;
    }
    
    .xioleni-preview-item .xioleni-preview-item-inner .xioleni-image-select-box.selected:before {
        content: "✓";
        color: white;
        font-size: 14px;
    }

    @media (max-width: 768px) {
        .xioleni-preview-img, .xioleni-preview-video {
            max-height: 280px;
        }
        
        .xioleni-effect-panel {
            width: 90%;
            max-width: 250px;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .xioleni-effect-option {
            padding: 8px;
            font-size: 14px;
        }
    }

    .xioleni-post {
        position: relative;
        background-color: #111;
        padding: 15px;
        border-radius: 15px;
        margin-bottom: 20px;
        color: #fff;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }

    .xioleni-post-content {
        width: 100%;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        display: block !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .xioleni-post-vermas {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 0 0 6px !important;
        font: inherit !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.2px !important;
        cursor: pointer !important;
        display: inline-block !important;
        opacity: 0.88 !important;
        text-decoration: none !important;
        touch-action: manipulation !important;
    }

    .xioleni-post-vermas[data-xioleni-vermas="expanded"] {
        padding: 10px 14px 10px 0 !important;
        margin: 0 !important;
    }

    .xioleni-post-vermas[data-xioleni-vermas="collapsed"] {
        padding: 0 !important;
        margin: 0 0 0 6px !important;
    }

    .xioleni-post-vermas-gap {
        display: block !important;
        width: 100% !important;
        height: 34px !important;
    }

    @media (max-width: 768px) {
        .xioleni-post-vermas[data-xioleni-vermas="expanded"] {
            padding: 12px 16px 12px 0 !important;
        }
        .xioleni-post-vermas-gap {
            height: 48px !important;
        }
    }

    .xioleni-post-vermas-holder {
        display: block !important;
        padding: 0 0 38px 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 5 !important;
        pointer-events: auto !important;
    }

    .xioleni-post-vermas-holder .xioleni-post-vermas {
        display: inline-block !important;
        padding: 2px 10px 2px 0 !important;
        margin: 0 !important;
    }

    .xioleni-post-vermas:hover,
    .xioleni-post-vermas:focus {
        opacity: 1 !important;
        text-decoration: underline !important;
        outline: none !important;
    }

    .xioleni-post[data-theme="light"] .xioleni-post-vermas,
    .xioleni-post[data-theme="medium-light"] .xioleni-post-vermas {
        color: rgba(33, 53, 61, 0.92) !important;
    }

    .xioleni-post[data-theme="dark"] .xioleni-post-vermas,
    .xioleni-post[data-theme="medium-dark"] .xioleni-post-vermas {
        color: rgba(255, 255, 255, 0.86) !important;
    }

    .xioleni-post-ellipsis {
        opacity: 0.82 !important;
    }
    
    /* Corregir imágenes dentro de los posts */
    .xioleni-post-content img:not(.xioleni-emoji-inline) {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Foto única directamente dentro del post: cuadrada por defecto */
    .xioleni-post-content > img:not(.xioleni-emoji-inline):not([data-size]) {
        max-width: 550px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Foto única dentro de contenedor de medios: cuadrada por defecto */
    .xioleni-post-content .xioleni-media-container img:not(.xioleni-emoji-inline):not([data-size]) {
        max-width: 550px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* En el editor: foto única (sin tamaño) siempre cuadrada */
    #xioleni-editor .xioleni-media-container img:not(.xioleni-emoji-inline):not([data-size]) {
        max-width: 550px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
    }

    @media (max-width: 768px) {
        .xioleni-post-content > img:not(.xioleni-emoji-inline):not([data-size]),
        .xioleni-post-content .xioleni-media-container img:not(.xioleni-emoji-inline):not([data-size]),
        #xioleni-editor .xioleni-media-container img:not(.xioleni-emoji-inline):not([data-size]) {
            max-width: 300px !important;
        }
    }
    
    /* Regla para contenedores dentro de los posts */
    .xioleni-post-content .xioleni-media-container {
        position: relative;
        display: block;
        margin: 10px auto;
        max-width: 550px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Regla general para todos los elementos en post-content */
    .xioleni-post-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* Permitir saltos normales en todos los elementos */
    }
    
    /* --- INICIO: Estilos para el editor renombrado dentro del post --- */
    .xioleni-post-content .xioleni-editor-publicado {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        padding: 0 !important; /* Resetear padding */
        margin: 0 !important; /* Resetear márgenes */
        border: none !important; /* Sin bordes */
        background-color: transparent !important; /* Sin fondo */
        color: inherit !important; /* Heredar color de texto */
        font-family: inherit !important; /* Heredar fuente */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }
    
    /* Asegurar que los hijos directos del editor publicado respeten el ancho */
    .xioleni-post-content .xioleni-editor-publicado > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* --- FIN: Estilos para el editor renombrado --- */

    .xioleni-post-header {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-right: 32px;
    }

    .xioleni-post.xioleni-has-checkbox .xioleni-post-header {
        padding-left: 28px;
    }

    .xioleni-post-user {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .xioleni-post-user-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        overflow: hidden;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 12px;
        background-color: rgba(255, 255, 255, 0.18);
    }

    .xioleni-post-user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .xioleni-post-user-name {
        font-size: 13px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 190px;
    }

    .xioleni-post-date {
        font-size: 12px;
        color: #aaa;
        text-align: right !important;
        flex: 0 0 auto;
        margin-left: auto;
        white-space: nowrap;
    }

    /* Reducir tamaño de fecha en móviles - 2 píxeles menos */
    @media (max-width: 768px) {
        .xioleni-post-date {
            font-size: 10px !important; /* 12px - 2px = 10px */
        }
    }

    .xioleni-post-delete {
        position: absolute;
        top: 10px;
        right: 15px;
        background: transparent;
        border: none;
        color: #FFFFFF;
        font-size: 20px;
        cursor: pointer;
        font-weight: bold;
    }

    /* Estilos para el selector de tamaño de fuente */
    .xioleni-font-size-panel {
        position: fixed;
        display: none;
        background-color: #333;
        padding: 15px;
        border-radius: 10px;
        z-index: 9999;
        width: 200px;
        box-shadow: 0 0 15px rgba(0,0,0,0.7);
        color: white;
        max-height: 70vh;
        overflow-y: auto;
        transform: none !important;
        margin: 0 !important;
        top: 0 !important;
        left: 0 !important;
    }

    .xioleni-font-size-option {
        background-color: #692547;
        color: white;
        border: none;
        padding: 8px 12px;
        margin: 4px 0;
        border-radius: 5px;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.2s;
        display: block;
        width: 100%;
    }

    .xioleni-font-size-option:hover {
        background-color: #951361;
    }

    /* Estilo para el tamaño de fuente actualmente seleccionado */
    .xioleni-active-size {
        background-color: #7b2e8e;
        border-color: #9e42b5;
        color: white;
        font-weight: bold;
        transform: scale(1.05);
        box-shadow: 0 0 8px rgba(123, 46, 142, 0.5);
    }

    .xioleni-font-size-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #333;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 10px;
        cursor: pointer;
        gap: 2px;
    }

    .xioleni-font-size-btn:hover {
        background-color: #444;
    }

    .xioleni-font-size-container {
        position: relative;
        display: inline-block;
    }

    .xioleni-alert {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #009cb61c;
        color: white;
        padding: 15px 25px;
        border-radius: 10px;
        z-index: 1000;
        box-shadow: 0 0 10px rgba(0, 156, 182, 0.5);
        display: none;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
    }
    
    /* Estilo para el alert en la parte inferior */
    #xioleni-bottom-alert-container .xioleni-alert {
        position: static;
        transform: none;
        display: none;
        background-color: #009cb61c;
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 156, 182, 0.5);
        margin: 0 auto;
        max-width: fit-content;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }

    .xioleni-confirmation-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .xioleni-confirmation-box {
        background-color: #222;
        padding: 20px;
        border-radius: 15px;
        width: 80%;
        max-width: 400px;
        position: relative;
        color: #fff;
        text-align: center;
    }

    .xioleni-confirmation-message {
        color: white;
        margin-bottom: 20px;
        font-size: 16px;
        text-align: center;
    }

    .xioleni-confirm-btn {
        background: #009cb61c;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        font-weight: bold;
        margin-right: 10px;
        cursor: pointer;
    }

    .xioleni-confirm-btn:active {
        background: linear-gradient(to bottom, #009cb61c, #ff5c00);
    }

    .xioleni-cancel-btn, .xioleni-select-multiple-btn {
        background-color: #333;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        cursor: pointer;
    }
    
    .xioleni-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        color: white;
        border: none;
        font-size: 20px;
        cursor: pointer;
        font-weight: bold;
    }
    
    .xioleni-multi-select-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .xioleni-multi-select-box {
        background-color: #222;
        padding: 20px;
        border-radius: 15px;
        width: 80%;
        max-width: 400px;
        position: relative;
        color: #fff;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .xioleni-post-checkbox {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        border: 2px solid #00abfd;
        border-radius: 4px;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
    }
    
    .xioleni-post-checkbox.selected {
        background-color: #00abfd;
    }
    
    .xioleni-post-checkbox.selected::after {
        content: "✓";
        color: white;
        font-weight: bold;
        font-size: 14px;
    }
    
    .xioleni-delete-selected-btn {
        background: #009cb61c;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        font-weight: bold;
        cursor: pointer;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        display: none;
    }

    .xioleni-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .xioleni-close-modal {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #FFFFFF;
        font-size: 20px;
        cursor: pointer;
        font-weight: bold;
    }

    #xioleni-color-selector {
        position: relative;
        display: inline-block;
    }

    #xioleni-color-panel {
        width: 240px !important;
        max-width: 240px !important;
        padding: 10px !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.7) !important;
        border-radius: 8px !important;
        background-color: #333 !important;
        z-index: 9999 !important;
    }
    
    /* Estilos para los elementos del panel de color */
    #xioleni-hue-slider, 
    #xioleni-alpha-input + div {
        width: 18px !important;
        height: 100px !important;
        position: relative !important;
        border-radius: 4px !important;
        border: 1px solid #444 !important;
        flex-shrink: 0 !important;
    }
    
    #xioleni-hue-slider {
        background: linear-gradient(to bottom, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000) !important;
    }
    
    #xioleni-color-area {
        height: 100px !important;
        flex-grow: 1 !important;
        position: relative !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }
    
    #xioleni-saturation-canvas {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Estilos para los cursores del panel de color */
    #xioleni-hue-cursor,
    #xioleni-color-cursor {
        position: absolute !important;
        pointer-events: none !important;
    }
    
    #xioleni-hue-cursor {
        width: 18px !important;
        height: 6px !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        left: 0 !important;
    }
    
    #xioleni-color-cursor {
        width: 14px !important;
        height: 14px !important;
        border-radius: 50% !important;
        background-color: white !important;
        border: 1.5px solid white !important;
        transform: translate(-50%, -50%) !important;
        box-shadow: 0 0 2px rgba(0,0,0,0.8) !important;
    }
    
    /* Estilos para las bolitas de los sliders */
    #xioleni-alpha-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: white;
        border: 1px solid #444;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    }
    
    #xioleni-alpha-input::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: white;
        border: 1px solid #444;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0,0,0,0.8);
    }
    
    /* Asegurar que el panel de color se mantenga proporcional en dispositivos móviles */
    @media (max-width: 768px) {
        #xioleni-color-panel {
            width: 220px !important;
            max-width: 220px !important;
            padding: 8px !important;
        }
        
        #xioleni-color-area {
            height: 90px !important;
            min-height: 90px !important;
        }
        
        #xioleni-hue-slider, 
    #xioleni-alpha-input + div {
        height: 90px !important;
        width: 15px !important;
    }
}

/* Efectos de entrada para imágenes */
.xioleni-img-entrada-slide-left,
.xioleni-grid-item .xioleni-img-entrada-slide-left { animation: xioleniSlideLeft 1s forwards !important; }
.xioleni-img-entrada-slide-right,
.xioleni-grid-item .xioleni-img-entrada-slide-right { animation: xioleniSlideRight 1s forwards !important; }
.xioleni-img-entrada-slide-up,
.xioleni-grid-item .xioleni-img-entrada-slide-up { animation: xioleniSlideUp 1s forwards !important; }
.xioleni-img-entrada-slide-down,
.xioleni-grid-item .xioleni-img-entrada-slide-down { animation: xioleniSlideDown 1s forwards !important; }
.xioleni-img-entrada-fade-in,
.xioleni-grid-item .xioleni-img-entrada-fade-in { animation: xioleniFadeIn 1.5s forwards !important; }
.xioleni-img-entrada-reverse-fade,
.xioleni-grid-item .xioleni-img-entrada-reverse-fade { animation: xioleniReverseFade 1.5s forwards !important; }

/* Efectos de interacción para imágenes */
.xioleni-img-interaccion-zoom:hover,
.xioleni-grid-item .xioleni-img-interaccion-zoom:hover { transform: scale(1.1) !important; transition: transform 0.3s !important; }
.xioleni-img-interaccion-shake:hover,
.xioleni-grid-item .xioleni-img-interaccion-shake:hover { animation: xioleniShake 0.5s infinite !important; }
.xioleni-img-interaccion-pulse:hover,
.xioleni-grid-item .xioleni-img-interaccion-pulse:hover { animation: xioleniPulse 1s infinite !important; }

/* Efectos de bucle para imágenes */
.xioleni-img-bucle-pulse,
.xioleni-grid-item .xioleni-img-bucle-pulse { animation: xioleniPulse 1.5s ease-in-out infinite !important; }
.xioleni-img-bucle-spin,
.xioleni-grid-item .xioleni-img-bucle-spin { animation: xioleniSpin 4s linear infinite !important; }
.xioleni-img-bucle-swing,
.xioleni-grid-item .xioleni-img-bucle-swing { animation: xioleniSwing 3s ease-in-out infinite !important; }
.xioleni-img-bucle-lateral-swing,
.xioleni-grid-item .xioleni-img-bucle-lateral-swing { animation: xioleniLateralSwing 3s ease-in-out infinite !important; }

    @media (max-width: 480px) {
        #xioleni-color-panel {
            width: 200px !important;
            max-width: 200px !important;
            padding: 8px !important;
        }
        
        #xioleni-color-area {
            height: 85px !important;
            min-height: 85px !important;
        }
        
        #xioleni-hue-slider, 
        #xioleni-alpha-input + div {
            height: 85px !important;
            width: 14px !important;
        }
    }

    .xioleni-color-btn {
        background-color: #009bb6b8;
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.3s ease;
    }

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

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

    #xioleni-color-indicator {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1px solid #555;
        background-color: #fff;
    }
    @keyframes xioleniLateralSwing {
        0%, 100% { transform: translateX(-10px); }
        50% { transform: translateX(10px); }
    }

    #xioleni-char-counter {
        display: block;
        margin: 0 10px 0 0;
        padding: 2px 10px;
        max-width: fit-content;
        text-align: left;
        white-space: nowrap;
        border-radius: 999px;
        background: rgba(0, 156, 182, 0.12);
        color: #545454;
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: 0.2px;
        opacity: 0.9;
        user-select: none;
    }

    html.dark-mode #xioleni-char-counter,
    body.dark-mode #xioleni-char-counter {
        color: rgba(255, 255, 255, 0.92);
    }

    #xioleni-char-counter.xioleni-over {
        background: rgba(255, 92, 0, 0.14);
        color: #ff5c00;
        opacity: 1;
    }