/* --- CONTENEDOR PRINCIPAL --- */
.misato-separator-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column; /* Alineación Vertical estricta */
    justify-content: flex-start; /* Fuerza a que todo empiece ARRIBA */
    box-sizing: border-box;
    /* La altura viene del PHP */
}

/* --- LA LÍNEA --- */
.misato-sep-line {
    box-sizing: border-box;
    /* Ancho (Peso) y Color vienen del PHP */
    
    /* ESTADO INICIAL (ANIMACIÓN): Altura 0 */
    height: 0; 
    
    /* Configuración de Animación */
    transition-property: height;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* Efecto suave */
    will-change: height;
    
    /* Para asegurar que se vea incluso con grosores decimales */
    min-height: 0;
}

/* --- ANIMACIÓN (FRONTEND) --- */
/* Cuando JS detecta scroll, esto se activa */
.misato-separator-wrapper.is-active .misato-sep-line {
    height: 100%; /* Crece de arriba a abajo porque el contenedor es flex-start */
}

/* --- FIX DE EMERGENCIA PARA EL EDITOR --- */
/* Si estamos editando, IGNORAMOS la altura 0. */
.misato-separator-wrapper.misato-is-editing .misato-sep-line {
    height: 100% !important;
    transition: none !important;
}