/* Estilos para el widget Off-Canvas */
.e-off-canvas {
    display: none; /* Por defecto oculto */
	/*animation: offCanvasFadeOut var(--e-off-canvas-animation-duration, 0.5s) both;*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /*align-items: var(--e-off-canvas-align-items, center);*/
    /*justify-content: var(--e-off-canvas-justify-content, center);*/
}

.e-off-canvas.is-open {
    display: flex !important; /* Mostrar cuando está abierto */
}

.admin-bar .e-off-canvas {
	top:32px;
}

.e-off-canvas__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /*opacity: var(--e-off-canvas-overlay-opacity, 1);*/
}

.e-off-canvas__content {
    position: relative;
    width: 300px;
    /*height: 100vh;*/
    /*max-height: 100vh;*/
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /*overflow: var(--e-off-canvas-content-overflow, auto);*/
    transition: transform var(--e-off-canvas-animation-duration, 0.5s) ease;
    z-index: 1;
}

.e-off-canvas__header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    /*border-bottom: 1px solid #eee;*/
	height:50px;
}

.e-off-canvas__title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.e-off-canvas__container {
	height: calc(100% - 50px);
    /*border: 1px solid black;*/
    display: flex;
    align-content: top;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: center;
	overflow:hidden;
}

.e-off-canvas__close-btn {
    /*background: none;*/
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Clases para animaciones de entrada */
.e-off-canvas.elementor-animation-fadeIn .e-off-canvas__content {
    animation: offCanvasFadeIn var(--e-off-canvas-animation-duration, 0.5s) both;
}

.e-off-canvas.elementor-animation-slideInRight .e-off-canvas__content {
    animation: offCanvasSlideInRight var(--e-off-canvas-animation-duration, 0.5s) both;
}

.e-off-canvas.elementor-animation-slideInLeft .e-off-canvas__content {
    animation: offCanvasSlideInLeft var(--e-off-canvas-animation-duration, 0.5s) both;
}

/* Clases para animaciones de salida */
.e-off-canvas.elementor-animation-fadeOut .e-off-canvas__content {
    animation: offCanvasFadeOut var(--e-off-canvas-animation-duration, 0.5s) both;
}

.e-off-canvas.elementor-animation-slideOutRight .e-off-canvas__content {
    animation: offCanvasSlideOutRight var(--e-off-canvas-animation-duration, 0.5s) both;
}

.e-off-canvas.elementor-animation-slideOutLeft .e-off-canvas__content {
    animation: offCanvasSlideOutLeft var(--e-off-canvas-animation-duration, 0.5s) both;
}

/* Animaciones */
@keyframes offCanvasFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes offCanvasFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes offCanvasSlideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes offCanvasSlideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes offCanvasSlideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes offCanvasSlideOutLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}