/* Asegurar que el contenedor respeta las clases de twentytwenty */
.pbmit-ele-before-after-inner {
    position: relative;
}

/* Etiquetas base */
.pbmit-ba-label {
    position: absolute !important;
    pointer-events: none;
    white-space: nowrap !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.pbmit-ba-label.visible {
    opacity: 1 !important;
}

/* Etiqueta BEFORE - debe estar dentro del contenedor de la imagen before */
.pbmit-ba-label-before {
    z-index: 25;
}

/* Etiqueta AFTER - debe estar dentro del contenedor de la imagen after */
.pbmit-ba-label-after {
    z-index: 15;
}

/* Posiciones para modo HORIZONTAL */
/* Before a la izquierda, After a la derecha */
.pbmit-ba-label-horizontal-top.pbmit-ba-label-before {
    top: 20px;
    left: 20px;
}

.pbmit-ba-label-horizontal-top.pbmit-ba-label-after {
    top: 20px;
    right: 20px;
}

.pbmit-ba-label-horizontal-middle.pbmit-ba-label-before {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.pbmit-ba-label-horizontal-middle.pbmit-ba-label-after {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.pbmit-ba-label-horizontal-bottom.pbmit-ba-label-before {
    bottom: 20px;
    left: 20px;
}

.pbmit-ba-label-horizontal-bottom.pbmit-ba-label-after {
    bottom: 20px;
    right: 20px;
}

/* Posiciones para modo VERTICAL */
/* Before arriba, After abajo */
.pbmit-ba-label-vertical-left.pbmit-ba-label-before {
    top: 20px;
    left: 20px;
}

.pbmit-ba-label-vertical-left.pbmit-ba-label-after {
    bottom: 20px;
    left: 20px;
}

.pbmit-ba-label-vertical-center.pbmit-ba-label-before {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.pbmit-ba-label-vertical-center.pbmit-ba-label-after {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.pbmit-ba-label-vertical-right.pbmit-ba-label-before {
    top: 20px;
    right: 20px;
}

.pbmit-ba-label-vertical-right.pbmit-ba-label-after {
    bottom: 20px;
    right: 20px;
}