/* CSS para posicionamiento centrado de paneles desplegables */

/* Centrar paneles en el centro del toolbar visible únicamente */
#panel-fuentes, #panel-tamanio, #panel-peso, #xioleni-fondo-panel {
    /* Posicionar respecto al toolbar visible, no al editor */
    position: absolute !important;
    left: 50% !important;
    top: 100% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
    min-width: 180px;
    margin-top: 5px !important;
    z-index: 10000 !important;
    /* Asegurar que no tapen el editor */
    pointer-events: auto;
}

/* Ajustes responsivos para tablets */
@media (max-width: 768px) {
    #panel-fuentes, #panel-tamanio, #panel-peso, #xioleni-fondo-panel {
        /* Mantener centrado pero reducir tamaño */
        max-width: calc(100vw - 60px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    #panel-fuentes {
        width: 200px !important;
        min-width: 180px !important;
    }
    
    #panel-tamanio {
        width: 220px !important;
        min-width: 200px !important;
    }
    
    #panel-peso {
        width: 180px !important;
        min-width: 160px !important;
    }
    
    #xioleni-fondo-panel {
        width: 180px !important;
        min-width: 160px !important;
    }
}

@media (max-width: 480px) {
    #panel-fuentes, #panel-tamanio, #panel-peso, #xioleni-fondo-panel {
        /* Centrar y hacer más pequeños en móviles */
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 80px) !important;
    }
    
    #panel-fuentes {
        width: 160px !important;
        min-width: 140px !important;
    }
    
    #panel-tamanio {
        width: 180px !important;
        min-width: 160px !important;
        /* Reducir grid para que quepa */
    }
    
    #panel-peso {
        width: 140px !important;
        min-width: 120px !important;
    }
    
    #xioleni-fondo-panel {
        width: 140px !important;
        min-width: 120px !important;
    }
    
    /* Ajustar contenido interno para pantallas pequeñas */
    #panel-tamanio .tamanio-btn {
        font-size: 10px !important;
        padding: 2px !important;
        margin: 1px !important;
    }
    
    /* Reducir grid de tamaños en móviles */
    #panel-tamanio > div:last-child {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px !important;
    }
    
    #opciones-fuentes .font-option {
        font-size: 12px !important;
        padding: 6px 8px !important;
        margin: 2px 0 !important;
    }
    
    /* Ajustar títulos de paneles */
    #panel-fuentes h4, #panel-tamanio h4, #panel-peso h4 {
        font-size: 12px !important;
        margin: 0 0 8px 0 !important;
    }
}

/* El toolbar debe ser el contenedor de referencia cuando esté visible */
.xioleni-toolbar.visible {
    position: relative !important;
    z-index: 1001;
}

/* Posicionamiento centrado de paneles - panel-fuentes con altura fija sin scroll interno */
.xioleni-toolbar.visible #panel-fuentes {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(var(--organizer-button-top, 120px) - 57px) !important;
    max-height: 165px !important;
    height: 165px !important;
    overflow-y: hidden !important;
    z-index: 1002 !important;
    margin-top: 0 !important;
    max-width: calc(100vw - 40px);
    min-width: 180px;
}

/* Posicionamiento para panel-tamanio */
.xioleni-toolbar.visible #panel-tamanio {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(var(--organizer-button-top, 120px) - 65px) !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    z-index: 1002 !important;
    margin-top: 0 !important;
    max-width: calc(100vw - 40px);
    min-width: 180px;
}

/* Posicionamiento para panel-peso */
.xioleni-toolbar.visible #panel-peso {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(var(--organizer-button-top, 120px) - 68px) !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    z-index: 1002 !important;
    margin-top: 0 !important;
    max-width: calc(100vw - 40px);
    min-width: 180px;
}

/* Posicionamiento para xioleni-fondo-panel (sin cambios adicionales) */
.xioleni-toolbar.visible #xioleni-fondo-panel {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(var(--organizer-button-top, 120px) - 30px) !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    z-index: 1002 !important;
    margin-top: 0 !important;
    max-width: calc(100vw - 40px);
    min-width: 180px;
}

/* Ocultar paneles cuando el toolbar no esté visible */
.xioleni-toolbar:not(.visible) ~ * #panel-fuentes,
.xioleni-toolbar:not(.visible) ~ * #panel-tamanio,
.xioleni-toolbar:not(.visible) ~ * #panel-peso,
.xioleni-toolbar:not(.visible) ~ * #xioleni-fondo-panel {
    display: none !important;
}

/* Centrado perfecto para todos los tamaños */
@media (min-width: 769px) {
    #panel-fuentes {
        width: 220px !important;
    }
    
    #panel-tamanio {
        width: 230px !important;
    }
    
    #panel-peso {
        width: 200px !important;
    }
    
    #xioleni-fondo-panel {
        width: 200px !important;
    }
}

/* Mejorar la visibilidad en pantallas pequeñas */
@media (max-width: 480px) {
    #panel-fuentes, #panel-tamanio, #panel-peso, #xioleni-fondo-panel {
        max-height: calc(100vh - 150px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }
}

/* Animación suave para la aparición de paneles */
#panel-fuentes, #panel-tamanio, #panel-peso, #xioleni-fondo-panel {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

#panel-fuentes[style*="display: block"],
#panel-tamanio[style*="display: block"],
#panel-peso[style*="display: block"],
#xioleni-fondo-panel[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Asegurar que los paneles estén por encima de otros elementos */
#panel-fuentes, #panel-tamanio, #panel-peso {
    z-index: 10000 !important;
}

#xioleni-fondo-panel {
    z-index: 10001 !important;
}