/* Estilos base para los contenedores de carrusel */
.xioleni-media-container[data-carousel="true"] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Indicador de tipo de carrusel en el editor */
.xioleni-carousel-type-label {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    padding: 3px 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
    border-radius: 4px;
    font-weight: bold;
}

/* Indicador de carrusel en el editor */
.xioleni-carousel-indicator {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 9;
    padding: 3px 6px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 16px;
    border-radius: 4px;
}

/* Estilos específicos para Slide */
.xioleni-carousel-slide {
    border-left: 3px solid rgba(0, 161, 224, 0.8);
}

.xioleni-slide-effect {
    transform-origin: center center;
    transition: transform 0.5s ease-out;
}

.xioleni-slide-effect:hover {
    animation: xioleni-slide-preview 1.5s ease infinite;
}

@keyframes xioleni-slide-preview {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2%); }
    50% { transform: translateX(0); }
    75% { transform: translateX(2%); }
    100% { transform: translateX(0); }
}

/* Estilos específicos para Fade */
.xioleni-carousel-fade {
    border-left: 3px solid rgba(0, 156, 182, 0.8);
}

.xioleni-fade-effect {
    transition: opacity 0.5s ease;
}

.xioleni-fade-effect:hover {
    animation: xioleni-fade-preview 2s ease infinite;
}

@keyframes xioleni-fade-preview {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Estilos específicos para Rotate */
.xioleni-carousel-rotate {
    border-left: 3px solid rgba(240, 135, 0, 0.8);
}

.xioleni-rotate-effect {
    transform-origin: center center;
    transition: transform 0.5s ease;
}

.xioleni-rotate-effect:hover {
    animation: xioleni-rotate-preview 2s ease infinite;
}

@keyframes xioleni-rotate-preview {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Estilos para el panel de carrusel */
#xioleni-carousel-options [data-carousel-type] {
    transition: background-color 0.3s ease;
}

#xioleni-carousel-options [data-carousel-type]:hover {
    background-color: #009cb61c !important;
}

#xioleni-carousel-options [data-carousel-type].active {
    background-color: #790847 !important;
}

/* Indicadores visuales en la vista previa */
.carousel-type-indicator {
    position: absolute;
    padding: 2px 4px;
    font-size: 10px;
    border-radius: 4px;
    color: white;
    z-index: 4;
}

/* Responsive */
@media (max-width: 768px) {
    .xioleni-carousel-type-label {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .xioleni-carousel-indicator {
        font-size: 14px;
    }
} 

/* Estilos para imágenes en grilla */
.xioleni-image-grid {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 5px auto 5px; /* 5px arriba y abajo para separación */
    clear: both;
    overflow: hidden; /* Contiene los elementos flotantes */
    position: relative; /* Permitir posicionamiento absoluto dentro */
    background-color: transparent; /* Fondo transparente */
    z-index: 1; /* Asegurar que esté sobre el texto */
    padding: 5px; /* 5px de relleno interno para separación */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Forzar que el texto aparezca debajo de la grilla completa con espacio mínimo */
.xioleni-image-grid::after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
    height: 0;
    margin-bottom: 0; /* Sin margen inferior */
}

/* Contenedor para la grilla de imágenes que fuerza el correcto flujo del texto */
.xioleni-grid-wrapper {
    display: block;
    width: 100%;
    clear: both;
    position: relative;
    margin: 5px auto 5px; /* 5px arriba y abajo para separación */
    overflow: visible; /* Permitir que el contenido sea visible */
    break-inside: avoid; /* Evitar que se rompa el contenedor */
    break-before: auto;
    break-after: auto;
    page-break-before: auto;
    page-break-after: auto;
    float: none !important; /* Prevenir flotado */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.xioleni-post-content .xioleni-grid-wrapper,
.xioleni-editor-publicado .xioleni-grid-wrapper,
#xioleni-editor .xioleni-grid-wrapper {
    display: flex !important;
    justify-content: center !important;
}

/* Asegurar que el grid wrapper ocupe todo el ancho disponible para prevenir colocación de texto al lado */
#xioleni-editor .xioleni-grid-wrapper,
.xioleni-editor-publicado .xioleni-grid-wrapper {
    width: 100% !important;
    display: block !important;
    column-span: all !important; /* Ocupar todas las columnas si las hay */
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important; /* Sin margen inferior */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Permitir escritura fluida de texto pero proteger grillas */
#xioleni-editor p,
.xioleni-editor-publicado p {
    width: 100% !important;
    display: block !important;
    clear: none; /* Permitir flujo normal de texto */
    min-height: 1em;
    float: none !important;
    column-span: all !important;
    position: relative !important;
    margin-top: 0.5em; /* Margen normal para párrafos */
    margin-bottom: 0.5em; /* Margen normal para párrafos */
}

/* Forzar clear solo para párrafos que siguen inmediatamente a grillas */
#xioleni-editor .xioleni-grid-wrapper + p,
.xioleni-editor-publicado .xioleni-grid-wrapper + p,
#xioleni-editor .xioleni-media-wrapper + p,
.xioleni-editor-publicado .xioleni-media-wrapper + p {
    clear: both !important;
    margin-top: 1em !important;
}

/* Contenedor wrapper para imágenes individuales */
.xioleni-media-wrapper {
    display: block;
    width: 100%;
    clear: both;
    position: relative;
    margin: 6px auto 0; /* MODIFICADO: Aumentado a 6px arriba para imágenes individuales */
    overflow: visible;
    float: none !important;
}

.xioleni-post-content .xioleni-media-wrapper,
.xioleni-editor-publicado .xioleni-media-wrapper,
#xioleni-editor .xioleni-media-wrapper {
    display: flex !important;
    justify-content: center !important;
}

/* Asegurar que el texto mantenga sus alineaciones */
#xioleni-editor p,
.xioleni-editor-publicado p {
    width: 100%;
    display: block;
    clear: both;
    min-height: 1em;
}

/* Preservar alineación del texto */
#xioleni-editor p[style*="text-align: left"],
.xioleni-editor-publicado p[style*="text-align: left"] {
    text-align: left !important;
}

#xioleni-editor p[style*="text-align: center"],
.xioleni-editor-publicado p[style*="text-align: center"] {
    text-align: center !important;
}

#xioleni-editor p[style*="text-align: right"],
.xioleni-editor-publicado p[style*="text-align: right"] {
    text-align: right !important;
}

#xioleni-editor p[style*="text-align: justify"],
.xioleni-editor-publicado p[style*="text-align: justify"] {
    text-align: justify !important;
}

/* Ajustar espaciado de los espaciadores */
.xioleni-grid-spacer {
    height: 0 !important; /* Sin altura */
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que los elementos de grilla se muestren correctamente */
.xioleni-grid-item {
    position: relative;
    width: calc(50% - 5px);
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 10px !important; /* Curva de 10px para items de grilla */
    float: left;
    margin-right: 10px;
    margin-bottom: 2px;
    margin-top: 0;
    padding: 0;
    top: 0;
    left: 0;
    box-sizing: border-box;
    /* Prevenir interacción con el cursor en bordes invisibles */
    pointer-events: auto;
    z-index: 2;
    display: block;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Eliminar margen derecho para elementos pares */
.xioleni-grid-item:nth-child(2n) {
    margin-right: 0;
    margin-top: 0;
    top: 0;
}

.xioleni-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    top: 0px !important;
    left: 0 !important; /* Corregido de 2.52px a 0 para alineación perfecta */
    /* transform: none !important; */ /* Comentado para permitir efectos de animación */
}

/* Ajuste para que el botón de eliminar aparezca encima de la imagen y no oculto */
.xioleni-grid-item .xioleni-media-remove-btn,
.xioleni-grid-item .xioleni-image-select-box {
    position: absolute;
    z-index: 100 !important; /* Z-index muy alto para asegurar visibilidad */
}

.xioleni-grid-item .xioleni-media-remove-btn {
    top: 5px;
    right: 5px;
    opacity: 1 !important; /* Siempre visible, no solo en hover */
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
}

.xioleni-grid-item .xioleni-image-select-box {
    top: 5px;
    left: 5px;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 2px solid #00abfd !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ajustes responsivos para la grilla */
@media (max-width: 768px) {
    .xioleni-grid-item {
        width: calc(50% - 5px);
    }
    .xioleni-grid-item img {
        width: 100%;
        height: 100%;
        max-width: 245px;
        max-height: 245px;
    }
}

@media (max-width: 480px) {
    .xioleni-grid-item img {
        max-width: 128px;
    max-height: 128px;
    }
    
    /* Reglas unificadas para imágenes medianas - Alineación perfecta */
    .xioleni-grid-item img[data-size="medium"],
    .xioleni-grid-item .xioleni-upload-tag[data-size="medium"] {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0px !important;
        left: 2.52px !important;
        /* transform: none !important; */ /* Comentado para permitir efectos de animación */
        box-sizing: border-box !important;
    }
    
    /* Asegurar que los grid-items con imágenes medianas mantengan el espaciado correcto */
    .xioleni-grid-item:has(img[data-size="medium"]),
    .xioleni-grid-item:has(.xioleni-upload-tag[data-size="medium"]) {
        width: calc(50% - 5px) !important;
        margin-right: 10px !important;
        margin-bottom: 2px !important;
        margin-top: 0 !important;
        display: block !important;
        float: left !important;
        position: relative !important;
        top: 0px !important;
        left: 2.52px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Eliminar margen derecho para el segundo elemento */
    .xioleni-grid-item:has(img[data-size="medium"]):nth-child(2n),
    .xioleni-grid-item:has(.xioleni-upload-tag[data-size="medium"]):nth-child(2n) {
        margin-right: 0 !important;
        margin-top: 0 !important;
        top: 0px !important;
    }
    
    /* NUEVO: Aplicar estilos específicos para imágenes en grilla en dispositivos móviles */
    /* Estos estilos se aplican específicamente en el editor para corregir el problema */
    #xioleni-editor .xioleni-grid-item img,
    .xioleni-editor-publicado .xioleni-grid-item img {
        max-width: 128px !important;
        max-height: 128px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1 !important;
        object-fit: cover !important;
    }
    
    /* Asegurar que los contenedores tengan el tamaño correcto */
    #xioleni-editor .xioleni-grid-item,
    .xioleni-editor-publicado .xioleni-grid-item {
        width: calc(50% - 5px) !important;
        max-width: 128px !important;
        max-height: 128px !important;
        float: left !important;
        display: block !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    /* Asegurar que el contenedor de la grilla tenga el ancho adecuado */
    #xioleni-editor .xioleni-image-grid,
    .xioleni-editor-publicado .xioleni-image-grid {
        width: 100% !important;
        max-width: 300px !important; /* Ajustado para móvil */
        margin: 0 auto !important;
    }
}

/* Prevenir que el editor coloque el cursor en áreas incorrectas alrededor de las imágenes */
#xioleni-editor .xioleni-grid-wrapper::before,
#xioleni-editor .xioleni-grid-wrapper::after,
.xioleni-editor-publicado .xioleni-grid-wrapper::before,
.xioleni-editor-publicado .xioleni-grid-wrapper::after {
    content: '';
    display: block;
    width: 100%;
    height: 0; /* Sin altura */
    clear: both;
    float: none;
    visibility: hidden;
}

/* Clase para prevenir interacciones en áreas específicas */
#xioleni-editor .xioleni-no-cursor {
    pointer-events: none;
}

/* Crear zona de exclusión alrededor de las grillas para evitar cursor muy cerca */
.xioleni-grid-wrapper::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    pointer-events: none;
    z-index: 10;
}

/* Evitar que el texto se posicione muy cerca de las grillas */
.xioleni-grid-wrapper {
    isolation: isolate;
}

/* Forzar separación mínima en todos los elementos que rodean las grillas */
#xioleni-editor .xioleni-grid-wrapper,
.xioleni-editor-publicado .xioleni-grid-wrapper {
    margin: 22px auto !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

#xioleni-editor .xioleni-grid-wrapper {
    margin-bottom: 6px !important;
}

/* Mejorar la visualización de las separaciones entre párrafos e imágenes */
#xioleni-editor p + .xioleni-grid-wrapper,
.xioleni-editor-publicado p + .xioleni-grid-wrapper {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    position: relative;
}

#xioleni-editor .xioleni-grid-wrapper + p {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    position: relative;
}
.xioleni-editor-publicado .xioleni-grid-wrapper + p {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    position: relative;
}

#xioleni-editor p + .xioleni-media-wrapper {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    position: relative;
}
.xioleni-editor-publicado p + .xioleni-media-wrapper {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    position: relative;
}

#xioleni-editor .xioleni-media-wrapper + p {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    position: relative;
}
.xioleni-editor-publicado .xioleni-media-wrapper + p {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    position: relative;
}

/* Indicador visual para debugging si es necesario (normalmente comentado) */
/*
#xioleni-editor .xioleni-grid-wrapper {
    border: 1px dashed rgba(255,0,0,0.3);
}
*/

/* Ajustes para PC - alineación uniforme de imágenes medianas */
/* Alineación unificada para todos los dispositivos */
.xioleni-grid-item img[data-size="medium"],
.xioleni-grid-item .xioleni-upload-tag[data-size="medium"] {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    /* transform: none !important; */ /* Comentado para permitir efectos de animación */
    position: relative !important;
    top: 20px !important;
    left: 2.52px !important;
}

/* Regla específica para cuando hay una sola imagen en el grid */
.xioleni-grid-wrapper .xioleni-grid-item:only-child {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.xioleni-grid-wrapper .xioleni-grid-item:only-child img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
}

/* Botones para imágenes individuales - Posicionamiento dentro de la imagen */
.xioleni-grid-wrapper .xioleni-grid-item:only-child {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

.xioleni-grid-wrapper .xioleni-grid-item:only-child img {
    position: relative !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;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !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;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #007bff !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}

/* Responsive para PC - Alineación uniforme */
@media (min-width: 769px) {
    /* Asegurar alineación perfecta en PC */
    .xioleni-grid-wrapper .xioleni-grid-item {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        vertical-align: top !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Eliminar cualquier margen específico para elementos pares/impares */
    .xioleni-grid-wrapper .xioleni-grid-item:nth-child(1),
    .xioleni-grid-wrapper .xioleni-grid-item:nth-child(2),
    .xioleni-grid-wrapper .xioleni-grid-item:nth-child(odd),
    .xioleni-grid-wrapper .xioleni-grid-item:nth-child(even) {
        margin-top: 0 !important;
        top: 0 !important;
    }
}

/* Responsive para móvil - Mantener alineación */
@media (max-width: 768px) {
    .xioleni-grid-item img[data-size="medium"],
    .xioleni-grid-item .xioleni-upload-tag[data-size="medium"] {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        /* transform: none !important; */ /* Comentado para permitir efectos de animación */
        position: relative !important;
        top: 0px !important;
        left: 2.52px !important;
    }
}